4 lines
35 KiB
HTML
4 lines
35 KiB
HTML
<!doctype html><html lang="de" itemscope itemtype="https://schema.org/Article"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Fragen im Bewerbungsgespräch für Frontend-Entwickler ★ Front-end Developer Interview Questions</title><meta name="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="keywords" content="front-end, interview questions, css questions, js questions, html questions, performance questions, interview test"><meta name="author" content="Front-end Developer Interview Questions"><meta itemprop="author" content="Front-end Developer Interview Questions"><meta itemprop="name" content="Fragen im Bewerbungsgespräch für Frontend-Entwickler ★ Front-end Developer Interview Questions"><meta itemprop="description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta itemprop="image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta property="og:title" content="Fragen im Bewerbungsgespräch für Frontend-Entwickler ★ Front-end Developer Interview Questions"><meta property="og:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta property="og:url" content="https://h5bp.org/Front-end-Developer-Interview-Questions//translations/german/"><meta property="og:site_name" content="Front-end Developer Interview Questions"><meta property="og:image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta property="og:type" content="website"><meta property="og:locale" content="en_US"><meta name="twitter:card" content="summary"><meta name="twitter:title" content="Fragen im Bewerbungsgespräch für Frontend-Entwickler ★ Front-end Developer Interview Questions"><meta name="twitter:description" content="A list of helpful front-end related questions you can use to interview potential candidates, test yourself or completely ignore."><meta name="twitter:site" content="@h5bp"><meta name="twitter:image" content="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/og-image.png"><meta name="twitter:creator" content="@h5bp"><link type="image/png" rel="apple-touch-icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/apple-touch-icon.png"><link type="image/png" sizes="32x32" rel="icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-32x32.png"><link type="image/png" sizes="16x16" rel="icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-32x32.png"><link type="image/png" color="#181818" rel="mask-icon" href="https://h5bp.org/Front-end-Developer-Interview-Questions//assets/images/favicon-96x96.png"><meta name="mobile-web-app-capable" content="yes"><meta name="robots" content="index,follow"><script>console.log(page.lang)</script><style>code[class*=language-],pre[class*=language-]{color:#c5c8c6;text-shadow:0 1px rgba(0,0,0,.3);font-family:Inconsolata,Monaco,Consolas,'Courier New',Courier,monospace;direction:ltr;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#370b44}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7c7c7c}.token.punctuation{color:#c5c8c6}.namespace{opacity:.7}.token.keyword,.token.property,.token.tag{color:#96cbfe}.token.class-name{color:#ffffb6;text-decoration:underline}.token.boolean,.token.constant{color:#9c9}.token.deleted,.token.symbol{color:#f92672}.token.number{color:#ff73fd}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a8ff60}.token.variable{color:#c6c5fe}.token.operator{color:#ededed}.token.entity{color:#ffffb6}.token.url{color:#96cbfe}.language-css .token.string,.style .token.string{color:#87c38a}.token.atrule,.token.attr-value{color:#f9ee98}.token.function{color:#dad085}.token.regex{color:#e9c062}.token.important{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}:root{--font-family-heading:sans-serif;--font-family-body:Georgia,serif;--font-family-code:Menlo,Monaco,'Courier New',monospace;--color-primary:#835EFF;--color-secondary:#FF008D;--color-safe:#8338EC;--color-gradient:linear-gradient(to right, var(--color-primary), var(--color-secondary));--color-highlight:var(--color-primary);--color-gray-opacity:rgba(39,39,39,0.04);--color-heading:#23231A;--color-text:#23231A;--background-default:#F9F9F9;--border-radius-default:5px;--box-shadow-default:0 2rem 4rem rgba(0,0,0,.15);--transition-duration:0.27s}body.rtl{--font-family-body:Arial,Helvetica,sans-serif}*{margin:0;padding:0;box-sizing:border-box;outline-color:var(--color-primary)}::selection{background:var(--color-primary);color:var(--background-default)}::-moz-selection{background:var(--color-primary);color:var(--background-default)}.nav{padding:1rem 0;position:relative;font-family:var(--font-family-heading)}.nav li{word-wrap:none;white-space:nowrap}.navigation{list-style:none;display:flex;flex-wrap:wrap;font-size:1rem}.navigation-questions-label{margin-right:auto}@media (min-width:60em){.navigation-questions-label{margin-right:0}}.navigation-toggle{display:inline-block;appearance:none;border:0;font-size:1rem;font-weight:600;cursor:pointer;background:0 0}.navigation-toggle::after{content:'\25BE';padding-left:.3rem;display:inline-block;font-size:1.2rem;font-weight:700;color:var(--color-primary);transform-origin:center}.navigation-toggle:active::after,.navigation-toggle:focus::after,.navigation-toggle:hover::after{color:var(--color-secondary)}.navigation.open .navigation-toggle::after{transform:scaleY(-1) translateY(-.25em)}@media (min-width:60em){.navigation-toggle{color:var(--color-text);pointer-events:none;cursor:default}.navigation-toggle::after{display:none}}.navigation-questions-list{padding:.5rem 1rem;display:flex;flex-direction:column;position:absolute;top:calc(100% - 1rem);left:0;z-index:1;opacity:0;transform:scale(.5,0);transform-origin:center top;transition:opacity .1s,transform .2s ease-out;background-color:#fff;box-shadow:0 0 0 1px var(--color-secondary),0 2px 4px -1px var(--color-text)}.navigation.open .navigation-questions-list{opacity:1;transform:none}.navigation.no-motion .navigation-questions-list{transition:none}@media (min-width:60em){.navigation-questions-list{padding:0;flex-direction:row;position:static;opacity:1;transform:none;transition:none;background-color:transparent;box-shadow:none}.navigation-questions-list li{margin:0}}.navigation-questions-anchor{visibility:hidden}.navigation.open .navigation-questions-anchor{visibility:visible}@media (min-width:60em){.navigation-questions-anchor{visibility:visible}}.navigation-item-emoji{width:100%;font-size:1rem;line-height:1rem;padding-bottom:1.5rem;margin-bottom:1.5rem;vertical-align:top;align-content:flex-start;border-bottom:1px solid #efefef}.navigation-item-home{border-bottom:none;padding-bottom:0;font-weight:600}@media (min-width:60em){.navigation-item-emoji{width:50%;margin-bottom:2rem;border-bottom:1px solid #efefef}}.navigation-item-emoji em{font-style:normal;margin-right:.5rem}.navigation-item-translations{text-align:left}@media (min-width:60em){.navigation-item-translations{text-align:right}}.navigation-item-home em{color:#835eff}.navigation-item-emoji a{text-decoration:none;display:inline-block;vertical-align:middle}@media (min-width:60em){.navigation-item:not(:last-of-type){margin-right:.8rem}}.navigation-anchor[rel~=external]::after{content:' ➚';color:var(--color-highlight)}.navigation-anchor.current{border-bottom:2px solid var(--color-highlight);padding:0 0 5px 0}.topbar{width:100%;height:.18rem;background:var(--color-gradient)}.skip-link{position:absolute;top:0;left:0;padding:.5rem 1rem;background-color:var(--color-primary);color:#fff;text-decoration:none;transform:translateY(-100%)}.skip-link:focus{transform:none}.header{margin-bottom:2rem}.header-big-title{font-size:2.3rem;line-height:1.06;margin:1.4rem 0 .7rem;color:var(--color-primary);word-break:break-word}.rtl .header-big-title{text-align:right}@media (min-width:30em){.header-big-title{margin:1.4rem 0 .7rem;font-size:4.6rem}}@media (min-width:60em){.header-big-title{margin:2.1rem 0 .7rem;font-size:5.4rem}}@supports (mix-blend-mode:lighten){.header-big-title{display:inline-block;position:relative;color:#000;background:#fff;mix-blend-mode:multiply}.header-big-title::before{content:'';display:block;position:absolute;top:0;right:0;bottom:0;left:0;background-image:url('https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/gradient.svg');background-size:cover;pointer-events:none}.header-big-title::before{mix-blend-mode:screen}}.header-heading{font-size:2.3rem;text-transform:uppercase}.header-big-description{font-size:1.2rem;line-height:1.4;padding:1rem 0}@media (min-width:30em){.header-big-description{font-size:1.5rem}}@media (min-width:60em){.header-big-description{font-size:1.8rem}}.header-description{padding-top:1rem}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:var(--font-family-body);font-weight:400;font-size:1.2rem;line-height:2;color:var(--color-text)}section+section{padding-top:2rem}h1,h2,h3,h4,h5,h6{font-family:var(--font-family-heading);color:var(--color-heading);font-style:normal;line-height:1.2;font-weight:600}section+section{padding-top:2rem}a{color:inherit;text-decoration:none;color:var(--color-secondary);transition:color ease-out var(--transition-duration)}a.current,a:focus:not(.skip-link),a:hover:not(.skip-link){color:var(--color-primary)}a:not(.navigation-anchor)[rel~=external]:after{content:' ➚'}ul:not(.navigation):not(.inline-list){list-style:none}ul:not(.navigation):not(.inline-list) li::before{content:"\25A0";color:var(--color-primary);font-weight:700;display:inline-block;width:1em;margin-left:-1em}.rtl ul:not(.navigation):not(.inline-list) li::before{margin-right:-1em;margin-left:initial}li{margin-bottom:.6rem}b,strong{font-weight:600}time{display:inline-block;color:var(--color-gray-70)}[tabindex='-1']{outline:0}img,svg{vertical-align:middle}img{display:block;max-width:100%;border-radius:var(--border-radius-default)}code{font-family:var(--font-family-code);color:var(--color-code);font-style:normal;font-size:1rem}blockquote:not([class]){padding-left:1rem;margin-left:-1rem;border-left:2px solid var(--color-primary);color:var(--color-gray-70);font-style:italic}code[class*=language-],pre[class*=language-]{font-size:.9rem;font-style:normal}p+pre[class*=language-]{margin-bottom:1.8rem}mark{color:var(--color-highlight);background-color:transparent}dt{font-weight:700}dd+dt{padding-top:.5rem}abbr[title],acronym[title]{background:var(--color-gray-opacity);border:1px solid var(--color-gray-opacity);cursor:help}.container{max-width:66rem;padding:1.5rem 2rem 2rem;margin-right:auto;margin-left:auto}@media (min-width:30rem){.container{padding:3rem 4rem 4rem}}.content li:not(:last-of-type){margin-bottom:1.2rem}.content h2{max-width:33rem}.content>:not(:last-child){margin-bottom:2rem}.content :not(hr)+h2,.content :not(hr)+h3{padding-top:1rem}.content ol:not(.inline-list),.content ul:not(.inline-list){padding-left:1.2rem}.content-simple li:not(:last-of-type){margin-bottom:.5rem}.content-edit{text-align:right;margin-top:2rem}.inline-list{padding:0;list-style:none;display:flex;flex-wrap:wrap}.inline-list li{padding:0 5px;display:inline-block;vertical-align:middle;text-align:center}.inline-list li::before{content:'';margin-left:0}.inline-list li img{display:block;margin:auto;margin-bottom:.6rem}.inline-list li a{display:inline-block;vertical-align:middle;margin:0 .15rem}.inline-list-contributors li a,.inline-list-original li a{font-size:1rem}.avatar{max-width:12rem}hr{border:none;bacground:none;border-bottom:1px solid #efefef}.footer{padding-top:3rem}.footer-text{font-size:.8rem}</style></head><body class=""><div class="topbar"></div><div class="container"><a class="skip-link" href="#main-content">Skip to main content</a><nav class="nav"><ul class="navigation" id="navigation"><li class="navigation-item-emoji navigation-item-home"><a class="navigation-anchor" href="/Front-end-Developer-Interview-Questions/" title="Home"><em>★</em><span>Front-end Developer Interview Questions</span></a></li><li class="navigation-item-emoji navigation-item-translations"><a class="navigation-anchor" href="/Front-end-Developer-Interview-Questions/translations" title="Translations"><em>🌐</em><span>Translations</span></a></li><li class="navigation-item navigation-questions-label"><button class="navigation-toggle" id="navigation-toggle">Questions:</button></li><li class="navigation-item navigation-questions"><ul class="navigation navigation-questions-list"><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/general-questions/" title="General Questions">General</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/html-questions/" title="HTML Questions">HTML</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/css-questions/" title="CSS Questions">CSS</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/javascript-questions/" title="JavaScript Questions">JavaScript</a></li><li class="navigation-item"><a rel="external noreferrer noopener" target="_blank" class="navigation-anchor navigation-questions-anchor" href="https://scottaohara.github.io/accessibility_interview_questions/" title="Accessibility Questions (external link)">A11y</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/testing-questions/" title="Testing Questions">Testing</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/performance-questions/" title="Performance Questions">Performance</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/network-questions/" title="Network Questions">Network</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/coding-questions/" title="Coding Questions">Coding</a></li><li class="navigation-item"><a class="navigation-anchor navigation-questions-anchor" href="/Front-end-Developer-Interview-Questions/questions/fun-questions/" title="Fun Questions">Fun</a></li></ul></li></ul></nav><main id="main-content" tabindex="-1"><header class="header"><h1 class="header-big-title">Fragen im Bewerbungsgespräch für Frontend-Entwickler</h1></header><div class="content"><h1>Fragen im Bewerbungsgespräch für Frontend-Entwickler</h1><p>@version 2.0.0</p><p>Dieses Repo enthält einige Fragen, die zur Einschätzung von geeigneten Frontend-Entwicklern innerhalb eines Bewerbungsgesprächs verwendet werden können. Es ist auf keinen Fall ratsam, einem Bewerber jede einzelne Frage zu stellen (das würde Stunden dauern). Es mag hilfreich sein, eine handvoll passender Fragen aus dieser Liste auszuwählen, um die Fähigkeiten abzuklopfen, die für den Job wichtig sind.</p><p><a href="http://rmurphey.com/">Rebecca Murphey</a>’s <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">Baseline For Front-End Developers</a> (Englisch) ist ebenso eine nützliche Quelle zur Vorbereitung auf ein Bewerbungsgespräch.</p><p><strong>Anmerkung:</strong> Beachte bitte, dass viele dieser Fragen so offen gehalten sind, dass sie interessante Diskussionen auslösen können, in deren Verlauf du viel mehr über die Fähigkeiten eines Bewerbers erfahren kannst, als in kurzen, direkten Antworten.</p><h4>Initiatoren und Mitwirkende</h4><p>Ein Großteil der Fragen wurden aus einer Diskussion bei <a href="http://oksoclap.com/">oksoclap</a> entnommen, die von <a href="http://paulirish.com">Paul Irish</a> (<a href="http://twitter.com/paul_irish">@paul_irish</a>) angestoßen wurde, und an der später folgende Personen beteiligt waren:</p><ul><li><a href="http://twitter.com/bentruyman">@bentruyman</a> - <a href="http://bentruyman.com">http://bentruyman.com</a></li><li><a href="http://twitter.com/cowboy">@cowboy</a> - <a href="http://benalman.com">http://benalman.com</a></li><li><a href="http://ajpiano">@ajpiano</a> - <a href="http://ajpiano.com">http://ajpiano.com</a></li><li><a href="http://twitter.com/slexaxton">@SlexAxton</a> - <a href="http://alexsexton.com">http://alexsexton.com</a></li><li><a href="http://twitter.com/boazsender">@boazsender</a> - <a href="http://boazsender.com">http://boazsender.com</a></li><li><a href="http://twitter.com/miketaylr">@miketaylr</a> - <a href="http://miketaylr.com">http://miketaylr.com</a></li><li><a href="http://twitter.com/vladikoff">@vladikoff</a> - <a href="http://vladfilippov.com">http://vladfilippov.com</a></li><li><a href="http://twitter.com/gf3">@gf3</a> - <a href="http://gf3.ca">http://gf3.ca</a></li><li><a href="http://twitter.com/jon_neal">@jon_neal</a> - <a href="http://twitter.com/jon_neal">http://twitter.com/jon_neal</a></li><li><a href="http://twitter.com/wookiehangover">@wookiehangover</a> - <a href="http://wookiehangover.com">http://wookiehangover.com</a></li><li><a href="http://twitter.com/darcy">@darcy_clarke</a> - <a href="http://darcyclarke.me">http://darcyclarke.me</a></li><li><a href="http://twitter.com">@iansym</a></li></ul><h3>Allgemeine Fragen:</h3><ul><li>Welche Versionsverwaltung hast du bisher verwendet (Git, SVN, etc.)?</li><li>Wie sieht deine bevorzugte Entwicklungsumgebung aus? (Betriebssystem, Editor, Browser, Werkzeuge, etc.)</li><li>Beschreibe bitte deinen Arbeitsablauf, wenn du eine Website entwickelst.</li><li>Kannst du den Unterschied zwischen Progressive Enhancement und Graceful Degradation beschreiben?<ul><li>Extra-Punkte für die Beschreibung von Feature Detection</li></ul></li><li>Beschreibe bitte, was »Semantisches HTML« bedeutet.</li><li>In welchem Browser entwickelst du vornehmlich und welche Entwicklerwerkzeuge verwendest du dabei?</li><li>Wie würdest du die Ressourcen einer Website im Hinblick auf Performance optimieren?<ul><li>Verschiedene Lösungsansätze könnten sein:<ul><li>Zusammenfassen von Dateien</li><li>Minifizierung</li><li>Nutzung von CDN</li><li>Caching</li><li>etc.</li></ul></li></ul></li><li>Warum ist es sinnvoll, Ressourcen über mehr als eine Domain abzufragen?<ul><li>Wie viele Quellen kann ein Browser von einer Domain parallel empfangen?</li></ul></li><li>Benenne drei Umstände, die das Laden einer Seite verlangsamen können (hinsichtlich der Wahrnehmung oder der tatsächlichen Ladezeit).</li><li>Wie verhältst du dich, wenn du in ein neues Projekt kommst, in dem Tabs verwendet werden und du aber Leerzeichen verwendest?<ul><li>Vorschlagen, dass für das Projekt sowas wie EditorConfig (<a href="http://editorconfig.org">http://editorconfig.org</a>) verwendet werden soll.</li><li>Sich an die Vorgaben des Projekts halten.</li><li><code>issue :retab! command</code></li></ul></li><li>Entwickle eine simple Slideshow-Seite.<ul><li>Bonuspunkte, wenn sie kein JS verwendet.</li></ul></li><li>Welche Werkzeuge nutzt du zum Testen der Performance deines Codes?<ul><li>JSPerf (<a href="http://jsperf.com/">http://jsperf.com/</a>)</li><li>Dromaeo (<a href="http://dromaeo.com/">http://dromaeo.com/</a>)</li><li>etc.</li></ul></li><li>Wenn du eine Technologie in diesem Jahr meistern könntest, welche wäre das?</li><li>Erkläre die Bedeutung von Standards und Standardisierungsorganisationen?</li><li>Was ist FOUC? Wie vermeidest du FOUC?</li></ul><h3>HTML-spezifische Fragen:</h3><ul><li>Was tut ein <code>doctype</code> und wie viele von ihnen kannst du benennen?</li><li>Was ist der Unterschied zwischen Standards-Modus und Quirks-Modus?</li><li>Welche Einschränkungen gibt es beim Ausliefern von XHTML-Seiten?<ul><li>Gibt es Probleme, wenn Seiten als <code>application/xhtml+xml</code> ausgeliefert werden?</li></ul></li><li>Wie lieferst du eine Seite mit Inhalten in verschiedenen Sprachen aus?<ul><li>Vor welchen Dingen solltest du dich hüten, wenn du mehrsprachige Websites designst oder entwickelst?</li></ul></li><li>Darf man XHTML-Syntax in HTML5 verwenden?</li><li>Wie verwendet man XML in HTML5?</li><li>Wofür sind <code>data-</code>-Attribute nützlich?</li><li>Was sind die Inhaltsmodelle in HTML4 und sind sie unterschiedlich in HTML5?</li><li>Stelle dir HTML5 als eine offene Internetplattform vor. Was sind die Basiskomponenten von HTML5?</li><li>Beschreibe die Unterschiede zwischen Cookies, sessionStorage und localStorage.</li></ul><h3>JS-spezifische Fragen:</h3><ul><li>Erkläre Event Delegation</li><li>Erkläre, wie <code>this</code> in JavaScript funktioniert.</li><li>Erkläre, wie prototypische Vererbung funktioniert.</li><li>Wie gehst du vor beim Testen von JavaScript?</li><li>AMD vs. CommonJS?</li><li>Welche JavaScript-Bibliotheken hast du bisher benutzt?</li><li>Hast du jemals den Sourcecode von Bibliotheken/Frameworks angeschaut, die du benutzt?</li><li>Was ist ein hashtable?</li><li>Was sind <code>undefined</code> und <code>undeclared</code> Variablen?</li><li>Was ist eine Closure und wie/warum würdest du eine verwenden?<ul><li>Dein bevorzugtes Pattern, um sie zu generieren? Argyle (Nur geeignet für IIFEs).</li></ul></li><li>Was ist ein typischer Anwendungsfall für anonymous functions?</li><li>Erkläre das »JavaScript Module Pattern« und wann du es verwenden würdest.<ul><li>Bonuspunkte, wenn sauberes Namespacing genannt wird.</li><li>Und wenn deine Module ohne Namespace sind?</li></ul></li><li>Wie organisierst du deinen Code? (Module Pattern, klassische Vererbung?)</li><li>Was ist der Unterschied zwischen host objects und native objects?</li><li>Unterschied zwischen:</li></ul><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span> <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token function">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token keyword">var</span> person <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token punctuation">)</span></code></pre><ul><li>Worin unterscheiden sich <code>.call</code> und <code>.apply</code>?</li><li>Erkläre <code>Function.prototype.bind</code>.</li><li>Wann optimierst du deinen Code?</li><li>Kannst du erklären, wie Vererbung in JavaScript funktioniert?</li><li>Wann verwendet man <code>document.write()</code>?<ul><li>Die meisten Werbebanner verwenden noch <code>document.write()</code>, obwohl es verpönt ist.</li></ul></li><li>Was sind die Unterschiede zwischen Feature Detection, Feature Inference und Verwendung des UA-Strings?</li><li>Erkläre AJAX so detailiert wie möglich.</li><li>Erkläre wie JSONP funktioniert (und warum es nicht wirklich AJAX ist).</li><li>Hast du schonmal JavaScript-Templating verwendet?<ul><li>Wenn ja, welche Bibliotheken hast du verwendet (Mustache, Handlebars, etc.)?</li></ul></li><li>Erkläre »Hoisting«.</li><li>Erkläre Event Bubbling.</li><li>Was ist der Unterschied zwischen einem »Attribut« und einer »Property«?</li><li>Warum ist es nicht sinnvoll, JavaScript-eigene Objekte zu erweitern?</li><li>Warum ist es sinnvoll, Kernfunktionen zu erweitern?</li><li>Unterschied zwischen document load event und document ready event?</li><li>Was ist der Unterschied zwischen <code>==</code> und <code>===</code>?</li><li>Erkläre, wie du einen Query-String-Parameter aus der URL des Browserfensters abfragst.</li><li>Erkläre die same-origin policy und in welcher Form sie JavaScript betrifft.</li><li>Erkläre Vererbungsmuster in JavaScript.</li><li>Bringe dies zum Laufen:</li></ul><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">duplicate</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// [1,2,3,4,5,1,2,3,4,5]</span></code></pre><ul><li>Beschreibe eine Strategie für Memoization (Vermeidung von Berechnungsschleifen) in JavaScript.</li><li>Warum heißt es »Ternary expression« und worauf deutet das Wort »Ternary« hin?</li><li>Was ist die Stelligkeit (Arity) einer Funktion?</li><li>Was ist <code>"use strict";</code>? Was sind die Vor- und Nachteile bei der Verwendung?</li></ul><h3>JS-Codebeispiele:</h3><pre class="language-javascript"><code class="language-javascript"><span class="token operator">~</span><span class="token operator">~</span><span class="token number">3.14</span></code></pre><p>Frage: Welcher Wert wird zurückgegeben?<br><strong>Antwort: 3</strong></p><pre class="language-javascript"><code class="language-javascript"><span class="token string">"Draußen nur Kännchen"</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">reverse</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span><span class="token string">""</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Frage: Welcher Wert wird zurückgegeben?<br><strong>Antwort: “nehcnnäK run neßuarD”</strong></p><pre class="language-javascript"><code class="language-javascript"><span class="token punctuation">(</span> window<span class="token punctuation">.</span>foo <span class="token operator">||</span> <span class="token punctuation">(</span> window<span class="token punctuation">.</span>foo <span class="token operator">=</span> <span class="token string">"bar"</span> <span class="token punctuation">)</span> <span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Frage: Welchen Wert hat window.foo?<br><strong>Antwort: “bar”</strong><br>nur wenn window.foo false war, andernfalls behält es seinen Wert.</p><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token string">"Hello"</span><span class="token punctuation">;</span> <span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">var</span> bar <span class="token operator">=</span> <span class="token string">" World"</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">alert</span><span class="token punctuation">(</span>foo <span class="token operator">+</span> bar<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Frage: Was ist das Ergebnis der beiden alerts oben?<br><strong>Antwort: “Hello World” & ReferenceError: bar is not defined</strong></p><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
foo<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
foo<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p>Frage: Welchen Wert hat foo.length?<br>**Antwort: <code>2</code></p><pre class="language-javascript"><code class="language-javascript"><span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
foo<span class="token punctuation">.</span>bar <span class="token operator">=</span> <span class="token string">'hello'</span><span class="token punctuation">;</span></code></pre><p>Frage: Welchen Wert hat foo.length?<br>**Antwort: <code>undefined</code></p><h3>jQuery-spezifische Fragen:</h3><ul><li>Erkläre »Chaining«.</li><li>Erkläre »Deferreds«.</li><li>Was sind ein paar jQuery-spezifische Optimierungen, die man vornehmen kann?</li><li>Was macht <code>.end()</code>?</li><li>Wie und warum würdest du einen Namespace für einen gebundenen Event handler verwenden?</li><li>Benenne 4 verschiedene Werte, die man einer jQuery-Methode übergeben kann.<ul><li>Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object etc.</li></ul></li><li>Was ist die effects (oder fx) queue?</li><li>Was ist der Unterschied zwischen <code>.get()</code>, <code>[]</code> und <code>.eq()</code>?</li><li>Was ist der Unterschied zwischen <code>.bind()</code>, <code>.live()</code>, und <code>.delegate()</code>?</li><li>Was ist der Unterschied zwischen <code>$</code> und <code>$.fn</code>? Was ist überhaupt <code>$.fn</code>?</li><li>Optimiere diesen Selektor:</li></ul><pre class="language-javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">".foo div#bar:eq(0)"</span><span class="token punctuation">)</span></code></pre><ul><li>Unterschied zwischen ‘delegate()’ und ‘live()’?</li></ul><h3>CSS-spezifische Fragen:</h3><ul><li>Erkläre was ein »Reset«-CSS macht und wofür es nützlich ist.</li><li>Beschreibe Floats und wie sie funktionieren.</li><li>Was sind die verschiedenen Clear-Methoden und welche ist geeignet für welchen Kontext?</li><li>Erkläre CSS-Sprites und wie du sie auf einer Seite oder Website implementieren würdest.</li><li>Was sind deine bevorzugten Image-Replacement-Techniken und wann benutzt du welche davon?</li><li>CSS-Hacks, per conditional eingebundene .css-Ressourcen oder… was sonst?</li><li>Wie lieferst du Seiten für funktional beschränkte Browser aus?<ul><li>Welche Techniken/Prozesse verwendest du dafür?</li></ul></li><li>Was sind die verschiedenen Möglichkeiten, um Inhalte visuell auszublenden (und für Screenreader zugänglich zu machen)?</li><li>Hast du schonmal ein Grid-System verwendet, und wenn ja, welches bevorzugst du?</li><li>Hast du media queries oder mobile-spezifische Layouts/CSS verwendet/entwickelt?</li><li>Bist du mit dem Styling von SVG vertraut?</li><li>Wie optimierst du Websites für den Druck?</li><li>Was sind ein paar Kniffe, um effizientes CSS zu schreiben?</li><li>Verwendest du CSS-Präprozessoren (Sass, Compass, Stylus, LESS)?<ul><li>Wenn ja, beschreibe bitte, was du an den verwendeten magst oder nicht magst.</li></ul></li><li>Wie würdest du ein Webdesign umsetzen, das Nicht-Standard-Schriften verwendet?<ul><li>Webfonts (Dienste wie Google Webfonts, Typekit, etc.)</li></ul></li><li>Erkläre wie ein Browser entscheidet, welche Elemente von einem CSS-Selektor erfasst werden.</li></ul><h3>Optionale Spaßfragen:</h3><ul><li>Was ist das großartigste, was du je entwickelt hast, und worauf bist du am meisten stolz?</li><li>Kennst du das Zeichen der HTML5-Gang?</li><li>Bist du gerade oder warst du jemals auf einem Boot?</li><li>Was sind die besten Eigenschaften der Entwicklerwerkzeuge, die du benutzt?</li><li>Hast du irgendwelche Freizeitprojekte? Welcher Art?</li><li>Erkläre die Bedeutung von »cornify«.</li><li>Schreibe auf einen Zettel die Buchstaben A B C D E von oben nach unten. Jetzt sortiere diese in umgekehrter Abfolge, ohne eine Zeile Code zu schreiben.<ul><li>Warte einen Moment und schaue, ob sie den Zettel umdrehen.</li></ul></li><li>Pirat oder Ninja?<ul><li>Bonuspunkt, wenn es eine Kombi ist und begründet werden kann (+2 für Zombieaffenpiratenninja).</li></ul></li><li>Wenn nicht Web-Entwicklung, was würdest du dann tun?</li><li>Wo ist Carmen Sandiego?<ul><li>Tipp: Die Antwort ist immer falsch.</li></ul></li><li>Was ist deine Lieblingsfunktion des Internet Explorers?</li><li>Ergänze diesen Satz: Brendan Eich und Doug Crockford sind die __________ von JavaScript.</li><li>jQuery: Eine großartige Bibliothek oder die großartigste Bibliothek von allen? Diskutiere.</li><li><a href="http://www.w3schools.com/">http://www.w3schools.com/</a> oder <a href="http://w3fools.com/">http://w3fools.com/</a></li></ul></div><div class="content-edit"><a rel="external noreferrer noopener" target="_blank" href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/tree/master/src/translations/german.md">Edit this page</a></div></main><footer class="footer"><p class="footer-text">Copyright © 2012 - 2024. Contributors to <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions/blob/main/CONTRIBUTORS.md">Front-end-Developer-Interview-Questions.</a><br>Curious about the project? <a href="/Front-end-Developer-Interview-Questions/about/">Read more about here</a>.</p></footer></div><script>console.log("%cA black belt is a white belt that didn't quit.","color: #fff; font-size: 20px; text-shadow: 1px 1px 1px #000; font-family: serif;");var navToggle=document.getElementById("navigation-toggle"),nav=document.getElementById("navigation");navToggle.addEventListener("click",function(){nav.classList.toggle("open")}),window.addEventListener("resize",function(){document.width>960?nav.classList.remove("active"):(nav.classList.add("no-motion"),setTimeout(function(){nav.classList.remove("no-motion")},250))});</script></body></html> |