1 line
38 KiB
HTML
1 line
38 KiB
HTML
<!doctype html><html lang="en" itemscope itemtype="https://schema.org/Article"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers ★ Front-end Job 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 Job Interview Questions"><meta itemprop="author" content="Front-end Job Interview Questions"><meta itemprop="name" content="Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers ★ Front-end Job 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.github.io/Front-end-Developer-Interview-Questions/assets/images/og-image.png"><meta property="og:title" content="Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers ★ Front-end Job 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.github.io/Front-end-Developer-Interview-Questions/translations/greek/"><meta property="og:site_name" content="Front-end Job Interview Questions"><meta property="og:image" content="https://h5bp.github.io/Front-end-Developer-Interview-Questions/assets/images/og-image.png"><meta property="og:image:secure_url" content="/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="Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers ★ Front-end Job 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.github.io/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="/assets/images/apple-touch-icon.png"><link type="image/png" sizes="32x32" rel="icon" href="/assets/images/favicon-32x32.png"><link type="image/png" sizes="16x16" rel="icon" href="/assets/images/favicon-32x32.png"><link type="image/png" color="#181818" rel="mask-icon" href="/assets/images/favicon-96x96.png"><meta name="mobile-web-app-capable" content="yes"><meta name="robots" content="index,follow"><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:#1d1f21}: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}*{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;margin-bottom:1rem}.navigation{list-style:none;display:flex;font-size:1rem}.navigation-item-emoji{margin-right:.8rem}.navigation-item-emoji a{text-decoration:none;display:inline-block;vertical-align:middle}.navigation-item:not(:last-of-type){margin-right:.8rem}.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:6.9rem;line-height:1.06;margin:2.1rem 0;color:var(--color-primary);word-break:break-word}@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(/assets/images/gradient.svg);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.8rem;line-height:1.4;padding:1rem 0}.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:1.5;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:focus:not(.skip-link),a:hover:not(.skip-link){color:var(--color-primary)}a[rel~=external]{text-decoration:overline}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}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]{text-decoration:overline;background:var(--color-gray-opacity);border:1px solid var(--color-gray-opacity);cursor:help}.container{max-width:54rem;padding:3rem 4rem 4rem;margin-right:auto;margin-left:auto}.content li:not(:last-of-type){margin-bottom:.5rem}.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}.inline-list li{padding:0;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}.avatar{max-width:12rem}.footer{padding-top:3rem}.footer-text{font-size:.8rem}</style></head><body><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"><li class="navigation-item"><span class="navigation-anchor">Questions:</span></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/coding-questions/" title="Coding Questions">Coding</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/css-questions/" title="CSS Questions">CSS</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/fun-questions/" title="Fun Questions">Fun</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/general-questions/" title="General Questions">General</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/html-questions/" title="HTML Questions">HTML</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/javascript-questions/" title="JavaScript Questions">JavaScript</a></li><li class="navigation-item"><a rel="external noreferrer noopener" target="_blank" class="navigation-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" href="/questions/network-questions/" title="Network Questions">Network</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/performance-questions/" title="Perfomance Questions">Perfomance</a></li><li class="navigation-item"><a class="navigation-anchor" href="/questions/testing-questions/" title="Testing Questions">Testing</a></li><li class="navigation-item">|</li><li class="navigation-item-emoji"><a class="navigation-anchor" href="/" title="Home">🏠</a></li><li class="navigation-item-emoji"><a class="navigation-anchor" href="/translations" title="Translations">🌐</a></li></ul></nav><main id="main-content" tabindex="-1"><header class="header"><h1 class="header-big-title">Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers</h1></header><div class="content"><h1>Ερωτήσεις συνέντευξης για υποψήφιους Frond-end developers</h1><p>Αυτό το αποθετήριο (repo) περιέχει μια σειρά από front-end ερωτήσεις συνέντευξης που μπορούν να χρησιμοποιηθούν κατά την εξέταση πιθανών υποψηφίων. Σε καμία περίπτωση δεν προτείνεται να θέσετε όλα τα ερωτήματα που βρίσκονται εδώ στον ίδιο υποψήφιο (αυτό θα έπαιρνε ώρες). Επιλέγοντας όμως μερικές από αυτές, θα μπορέσετε να επιλέξετε τον υποψήφιο με τις κατάλληλες για σας δεξιότητες.</p><p>Επίσης, πριν προχωρήσετε στις συνεντεύξεις, θα ήταν εξαιρετικά χρήσιμο να διαβάσετε το άρθρο της <a href="http://rmurphey.com/">Rebecca Murphey</a> <a href="http://rmurphey.com/blog/2012/04/12/a-baseline-for-front-end-developers/">“Baseline For Front-End Developers”</a>.</p><p><strong>Σημείωση:</strong> Λάβετε υπόψη ότι πολλές από αυτές τις ερωτήσεις είναι ελευθέρου θέματος και μπορεί να οδηγήσουν σε ενδιαφέρουσες συζητήσεις που θα σας πουν πολλά περισσότερα πράγματα σχετικά με τις δυνατότητες του υποψήφιου από μια απλή απάντηση.</p><h2 id="%CF%80%CE%B5%CF%81%CE%B9%CE%B5%CF%87%CF%8C%CE%BC%CE%B5%CE%BD%CE%B1"><a class="header-anchor" href="#%CF%80%CE%B5%CF%81%CE%B9%CE%B5%CF%87%CF%8C%CE%BC%CE%B5%CE%BD%CE%B1" aria-hidden="true"></a> <a name="toc">Περιεχόμενα</a></h2><ol><li><a href="#contributors">Αρχικοί Συντελεστές</a></li><li><a href="#general">Γενικές Ερωτήσεις</a></li><li><a href="#html">HTML Ερωτήσεις</a></li><li><a href="#css">CSS Ερωτήσεις</a></li><li><a href="#js">JS Ερωτήσεις</a></li><li><a href="#jquery">jQuery Ερωτήσεις</a></li><li><a href="#jscode">Coding Ερωτήσεις</a></li><li><a href="#fun">Διασκεδαστικές Ερωτήσεις</a></li><li><a href="#references">Άλλες Εξαιρετικές Πηγές</a></li></ol><h4><a href="#toc">[⬆]</a> <a name="contributors">Αρχικοί Συντελεστές:</a></h4><p>Οι περισσότερες ερωτήσεις προέκυψαν από ένα <a href="http://oksoclap.com/">oksoclap</a> thread που δημιουργήθηκε αρχικά από τον <a href="http://paulirish.com">Paul Irish</a> (<a href="http://twitter.com/paul_irish">@paul_irish</a>) και στο οποίο συνείσφεραν τα παρακάτω άτομα:</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/iansym">@iansym</a> - <a href="http://twitter.com/iansym">http://twitter.com/iansym</a></li></ul><h4><a href="#toc">[⬆]</a> <a name="general">Γενικές Ερωτήσεις:</a></h4><ul><li>Τι μάθατε χτές/αυτή την εβδομάδα;</li><li>Τι σε ενθουσιάζει ή σας ενδιαφέρει σχετικά με τον προγραμματισμό;</li><li>Τι σκέφτεστε σχετικά με το UI, Ασφάλεια, Απόδοση, SEO, Συντηρησιμότητα και Τεχνολογία, ενώ υλοποιείτε μια web εφαρμογή ή ιστοσελίδα;</li><li>Μιλήστε σχετικά με το προτιμώμενο περιβάλλον ανάπτυξής σας. (OS, Editor, Φυλλομετρητές, εργαλεία κ.λπ.)</li><li>Με ποια έκδοση version control συστήματος είστε εξοικειωμένος;</li><li>Μπορείτε να περιγράψετε τη ροή της εργασίας σας κατά την διάρκεια δημιουργίας μιας ιστοσελίδας;</li><li>Μπορείτε να περιγράψετε τη διαφορά μεταξύ progressive enhancement και graceful degradation;<ul><li>Επιπλέον βαθμοί για την περιγραφή feature detection</li></ul></li><li>Εξηγήστε τι σημαίνει “Semantic HTML”.</li><li>Πώς μπορείτε να κάνετε optimize τα στοιχεία/πόρους των ιστοσελίδων σας;<ul><li>Ψάχνοντας για μια σειρά από λύσεις που μπορεί να περιλαμβάνουν:<ul><li>File concatenation</li><li>File minification</li><li>CDN Hosted</li><li>Caching</li><li>etc.</li></ul></li></ul></li><li>Γιατί είναι καλύτερα να σερβίρετε τα στοιχεία της ιστοσελίδας σας από πολλά domains;<ul><li>Πόσα resources τη φορά μπορεί να κατεβάσει ένας φυλλομετρητής από κάθε domain;</li></ul></li><li>Ονομάστε 3 τρόπους μείωσης του page load. (θεωρητικός ή πραγματικός χρόνος φόρτωσης)</li><li>Αν μπείτε σε κάποιο έργο στο οποίο χρησιμοποιούν tabs και εσείς έχετε συνηθίσει spaces, τι θα κάνατε;<ul><li>Προτείνετε να χρησιμοποιηθεί στο έργο κάτι σαν το EditorConfig (<a href="http://editorconfig.org">http://editorconfig.org</a>)</li><li>Συμμορφωθείτε με τις συμβάσεις (μείνετε συνεπής)</li><li><code>issue :retab! command</code></li></ul></li><li>Δημιουργήστε μια απλή slideshow σελίδα<ul><li>Επιπλέον βαθμοί αν δεν χρησιμοποιηθεί καθόλου JS.</li></ul></li><li>Ποια εργαλεία χρησιμοποιείτε για να ελέγξετε την απόδοση του κώδικά σας;<ul><li>Profiler, JSPerf, Dromaeo</li></ul></li><li>Αν θα μπορούσατε να κατέχετε μια τεχνολογία φέτος, ποια θα ήταν αυτή;</li><li>Ποιες είναι οι διαφορές μεταξύ Long-Polling, WebSockets και SSE;</li><li>Εξηγήστε τη σημασία των standards και των οργανισμών τους.</li><li>Τι είναι FOUC; Πώς μπορείτε να αποφύγετε το FOUC;</li><li>Περιγράψτε όσο καλύτερα γίνεται τη διαδικασία από τη στιγμή που θα πληκτρολογείτε το URL ενός ιστότοπου μέχρι το τελείωμα του loading στην οθόνη σας.</li></ul><h4><a href="#toc">[⬆]</a> <a name="html">HTML Ερωτήσεις:</a></h4><ul><li>Τι κάνει το <code>doctype</code>?</li><li>Ποια είναι η διαφορά μεταξύ standards mode και quirks mode;</li><li>Ποιοι είναι περιορισμοί όταν “σερβίρετε” XHTML σελίδες;<ul><li>Υπάρχουν προβλήματα όταν “σερβίρετε” σελίδες ως <code>application/xhtml+xml</code>;</li></ul></li><li>Πώς σερβίρετε μια σελίδα με περιεχόμενο σε πολλές γλώσσες;<ul><li>Σε τι είδους πράγματα πρέπει να είστε προσεκτικοί κατά τον σχεδιασμό ή την ανάπτυξη για πολυγλωσσικά sites;</li></ul></li><li>Σε τι είναι χρήσιμα τα <code>data-</code> attributes;</li><li>Εξετάστε την HTML5 ως μια ανοιχτή web πλατφόρμα. Ποια είναι τα δομικά στοιχεία της;</li><li>Περιγράψτε τη διαφορά μεταξύ των cookies, sessionStorage και localStorage.</li><li>Μπορείτε να εξηγήσετε τη διαφορά μεταξύ <code>GET</code> και <code>POST</code>;</li></ul><h4><a href="#toc">[⬆]</a> <a name="css">CSS Ερωτήσεις:</a></h4><ul><li>Περιγράψτε τι κάνει ένα “reset” CSS αρχείο και γιατί είναι χρήσιμο.</li><li>Περιγράψτε τι είναι τα “Floats” και πώς λειτουργούν.</li><li>Περιγράψτε το z-index και πως λειτουργεί ο τρόπο στοίβαξης.</li><li>Ποιες είναι οι διάφορες τεχνικές “clearing” και ποια είναι η κατάλληλη για κάθε περίπτωση;</li><li>Εξηγήστε τί είναι τα CSS sprites, και πώς θα τα υλοποιούσατε σε μια σελίδα ή site.</li><li>Ποιες είναι οι αγαπημένες σας image replacement τεχνικές και ποιες χρησιμοποιείτε;</li><li>CSS property hacks, conditionally included .css αρχεία, ή… κάτι άλλο;</li><li>Πώς σερβίρεται τις σελίδες σας για feature-constrained browsers;<ul><li>Ποιες τεχνικές/εργασίες χρησιμοποιείτε;</li></ul></li><li>Ποιοι είναι οι διαφορετικοί τρόποι για αποκρύψετε οπτικά (visually hide) περιεχόμενο (και να είναι διαθέσιμo μόνο για screen readers);</li><li>Έχετε χρησιμοποιήσει ποτέ κάποιο grid system, και αν ναι, ποιο προτιμάτε;</li><li>Έχετε χρησιμοποιήσει ή υλοποιήσει media queries ή mobile specific layouts/CSS;</li><li>Κάποια εξοικείωση σε styling SVG;</li><li>Πώς θα βελτιστοποιήσετε τις ιστοσελίδες σας για εκτύπωση;</li><li>Ποια είναι μερικά από τα “gotchas” για συγγραφή αποτελεσματικής CSS;</li><li>Ποια είναι τα πλεονεκτήματα/μειονεκτήματα κατά την χρήση CSS preprocessors; (SASS, Compass, Stylus, LESS)<ul><li>Εάν έχετε χρησιμοποιήσει CSS preprocessors, περιγράψτε τι σας αρέσει και τι όχι.</li></ul></li><li>Πώς θα υλοποιούσατε ένα web design δείγμα που χρησιμοποιεί μη-standard γραμματοσειρές;<ul><li>Webfonts (υπηρεσίες γραμματοσειρών όπως: Google Webfonts, Typekit etc.)</li></ul></li><li>Εξηγήστε πώς ένας browser καθορίζει ποια στοιχεία ταιριάζουν με έναν CSS selector;</li><li>Εξηγήστε το “box model” και πως θα πείτε στον browser μέσω CSS να ρεντάρει (render) το layout σε διαφορετικά box models.</li><li>Τι κάνει το <code>* { box-sizing: border-box; }</code>? Ποια είναι τα πλεονεκτήματά του;</li><li>Αναφέρετε όσες τιμές (values) μπορείτε να θυμηθείτε για το display property.</li><li>Ποια είναι η διαφορά μεταξύ inline και inline-block;</li><li>Ποια είναι η διαφορά μεταξύ relative, fixed, absolute και statically τοποθετυμένου element;</li><li>Τι υπάρχοντα CSS frameworks έχετε χρησιμοποιήσει τοπικά, ή σε παραγωγή; (Bootstrap, PureCSS, Foundation κτλ.)<ul><li>Αν ναι, ποια από αυτά; Αν μπορούσατε, πώς θα τα αλλάζατε/βελτιώνατε;</li></ul></li><li>Έχετε παίξει με τις νέες CSS Flexbox ή Grid προδιαγραφές;<ul><li>Αν ναι, τι γνώμη έχετε για την επίδοση τους?</li></ul></li></ul><h4><a href="#toc">[⬆]</a> <a name="js">JS Ερωτήσεις:</a></h4><ul><li>Εξηγήστε το “event delegation”</li><li>Εξηγήστε πως λειτουργεί το <code>this</code> στην JavaScript</li><li>Εξηγήστε πως λειτουργεί η prototypal κληρονομικότητα</li><li>Πως κάνετε τεστ στη JavaScript;</li><li>AMD vs. CommonJS;</li><li>Τι είναι το hashtable;</li><li>Εξηγήστε γιατί το παρακάτω δεν λειτουργεί σαν IIFE: <code>function foo(){ }();</code>.<ul><li>Τι χρειάζεται να αλάξει έτσι ώστε να λειτουργήσει σαν IIFE;</li></ul></li><li>Ποια είναι η διαφορά ανάμεσα σε μια μεταβλητή που είναι: <code>null</code>, <code>undefined</code> και <code>undeclared</code>;<ul><li>Πώς θα ελέγξετε οποιαδήποτε από τις παραπάνω καταστάσεις;</li></ul></li><li>Τί είναι closure, και πως/γιατί να το χρησιμοποιήσετε;</li><li>Ποια είναι η πιο χαρακτηριστική χρήση των anonymous functions;</li><li>Εξηγήστε την “JavaScript module pattern” και πότε θα την χρησιμοποιούσατε.<ul><li>Επιπλέον βαθμοί για την αναφορά καθαρού namespacing.</li><li>Τι γίνεται αν τα modules είναι namespace-less;</li></ul></li><li>Πώς οργανώνετε τον κωδικό σας; (module pattern, classical inheritance;)</li><li>Ποια είναι η διαφορά μεταξύ host objects και native objects;</li><li>Διαφορά μεταξύ: <code>function Person(){}</code>, <code>var person = Person()</code>, και <code>var person = new Person()</code>;</li><li>Ποια είναι η διαφορά μεταξύ <code>.call</code> and <code>.apply</code>;</li><li>Εξηγήστε τι είναι <code>Function.prototype.bind</code>;</li><li>Πότε βελτιστοποιείτε τον κώδικα σας;</li><li>Μπορείτε να μας εξηγήσετε πώς λειτουργεί η κληρονομικότητα (inheritance) στην JavaScript;</li><li>Πότε θα χρησιμοποιήσετε <code>document.write()</code>;<ul><li>Οι περισσότερες διαφημίσεις που δημιουργούνται χρησιμοποιούν ακόμα <code>document.write ()</code> αν και η χρήση του είναι παρακινδυνευμένη</li></ul></li><li>Ποια είναι η διαφορά μεταξύ feature detection, feature inference, και χρησιμοποιώντας το UA string</li><li>Εξηγήστε το AJAX με όσες περισσότερες λεπτομέρειες μπορείτε</li><li>Εξηγήστε πώς λειτουργεί το JSONP (και πως δεν είναι στην πραγματικότητα AJAX)</li><li>Έχετε χρησιμοποιήσει ποτέ JavaScript templating?<ul><li>Αν ναι, ποιες libraries έχετε χρησιμοποιήσει; (Mustache.js, Handlebars κτλ.)</li></ul></li><li>Εξηγήστε τι είναι το “hoisting”.</li><li>Περιγράψτε το event bubbling.</li><li>Ποια είναι η διαφορά μεταξύ “attribute” και “property”;</li><li>Γιατί η επέκταση (extending) των built in JavaScript objects δεν είναι καλή ιδέα;</li><li>Γιατί η επέκταση (extending) των built ins είναι καλή ιδέα;</li><li>Ποια είναι η διαφορά μεταξύ document load event και document ready event;</li><li>Ποια είναι η διαφορά μεταξύ <code>==</code> and <code>===</code>;</li><li>Εξηγήστε πώς θα πάρετε μια παράμετρο query string από το URL του παράθυρου (window) του browser.</li><li>Εξηγήστε την πολιτική same-origin σε σχέση με την JavaScript.</li><li>Περιγράψτε τις inheritance patterns της JavaScript.</li><li>Κάνε το παρακάτω να δουλέψει:</li></ul><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><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></div></code></pre><ul><li>Περιγράψτε μια στρατηγική για memoization (αποφεύγοντας τον υπολογισμό επανάληψης) σε JavaScript.</li><li>Γιατί ονομάζεται Ternary expression, τι υποδεικνύει η λέξη “Ternary”;</li><li>Τι είναι η arity μιας συνάρτησης (function);</li><li>Τι σημαίνει <code>"use strict";</code>; Ποια είναι τα πλεονεκτήματα και τα μειονεκτήματα στην χρήση του;</li></ul><h4><a href="#toc">[⬆]</a> <a name="jquery">jQuery Ερωτήσεις:</a></h4><ul><li>Εξηγήστε το “chaining”.</li><li>Εξηγήστε το “deferreds”.</li><li>Ποιές jQuery βελτιστοποιήσεις μπορείτε να υλοποιήσετε;</li><li>Τι κάνει το <code>.end()</code>;</li><li>Πώς, και γιατί, να χρησιμοποιήσεις namespace σε έναν bound event handler;</li><li>Ονόμασε 4 διαφορετικές τιμές που μπορείς να περάσεις στην jQuery method.<ul><li>Selector (string), HTML (string), Callback (function), HTMLElement, object, array, element array, jQuery Object κτλ.</li></ul></li><li>Τι είναι η effects (ή fx) queue;</li><li>Ποια είναι η διαφορά μεταξύ <code>.get()</code>, <code>[]</code>, και <code>.eq()</code>;</li><li>Ποια είναι η διαφορά μεταξύ <code>.bind()</code>, <code>.live()</code>, και <code>.delegate()</code>?</li><li>Ποια είναι η διαφορά μεταξύ <code>$</code> and <code>$.fn</code>; Η απλά τι είναι <code>$.fn</code>.</li><li>Βελτιστοποιήστε τον παρακάτω selector:</li></ul><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><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></div></code></pre><h4><a href="#toc">[⬆]</a> <a name="jscode">Code Ερωτήσεις:</a></h4><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token function">modulo</span><span class="token punctuation">(</span><span class="token number">12</span><span class="token punctuation">,</span> <span class="token number">5</span><span class="token punctuation">)</span> <span class="token comment">// 2</span></div></code></pre><p><em>Ερώτηση: Υλοποιήστε μια modulo function που ικανοποιεί το παραπάνω</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><span class="token string">"i'm a lasagna hog"</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></div></code></pre><p><em>Ερώτηση: Τι τιμή επιστρέφει από την παραπάνω δήλωση;</em></p><p><strong>Απάντηση: "goh angasal a m’i"</strong></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><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></div></code></pre><p><em>Ερώτηση: Ποια είναι η τιμή του <code>window.foo</code>?</em></p><p><strong>Απάντηση: “bar”</strong> <em>(μόνο αν το <code>window.foo</code> ήταν falsey αλλιώς θα διατηρούσε την τιμή)</em></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><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></div></code></pre><p><em>Ερώτηση: Ποιο είναι το αποτέλεσμα των δύο παραπάνω alerts?</em></p><p><strong>Απάντηση: “Hello World” & ReferenceError: bar is not defined</strong></p><pre class="language-javascript"><code class="language-javascript"><div class="highlight-line"><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></div><div class="highlight-line">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></div><div class="highlight-line">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></div></code></pre><p><em>Ερώτηση: Ποια είναι η τιμή του <code>foo.length</code>?</em></p><p><strong>Απάντηση: <code>2</code></strong></p><h4><a href="#toc">[⬆]</a> <a name="fun">Διασκεδαστικές Ερωτήσεις:</a></h4><ul><li>Ποιο είναι το πιο σημαντικό πράγμα που έχετε υπολοιήση, ποιο είναι αυτό για το οποίο αισθάνεστε πραγματικά περήφανος;</li><li>Ποια είναι τα αγαπημένα σας εργαλεία στα developer tools που χρησιμοποιείτε;</li><li>Έχετε κάποια pet projects; Τι ακριβώς;</li><li>Ποιο είναι το αγαπημένο σας χαρακτηριστικό στον Internet Explorer?</li></ul><h4><a href="#toc">[⬆]</a> <a name="references">Άλλες Εξαιρετικές Πηγές:</a></h4><ul><li><a href="http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before">http://programmers.stackexchange.com/questions/46716/what-technical-details-should-a-programmer-of-a-web-application-consider-before</a></li><li><a href="http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/">http://www.nczonline.net/blog/2010/01/05/interviewing-the-front-end-engineer/</a></li><li><a href="http://css-tricks.com/interview-questions-css/">http://css-tricks.com/interview-questions-css/</a></li><li><a href="http://davidshariff.com/quiz/">http://davidshariff.com/quiz/</a></li><li><a href="http://blog.sourcing.io/interview-questions">http://blog.sourcing.io/interview-questions</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/greek/index">Edit this page</a></div></main><footer class="footer"><p class="footer-text">Copyright (c) 2012 - 2018. Contributors to <a href="https://github.com/h5bp/Front-end-Developer-Interview-Questions">Front-end-Developer-Interview-Questions.</a><br>This project is maintained by <a href="https://github.com/cezaraugusto" target="_blank" rel="noreferrer noopener">Cezar Augusto</a>, <a href="https://github.com/roblarsen" target="_blank" rel="noreferrer noopener">Rob Larsen</a> and <a href="https://github.com/vvscode" target="_blank" rel="noreferrer noopener">Vasiliy Vanchuk</a> .<br>Curious about the project? <a href="/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: 80px; text-shadow: 1px 1px 1px #000; font-family: serif;");</script></body></html> |