3 lines
35 KiB
HTML
3 lines
35 KiB
HTML
<!doctype html><html lang="lv" itemscope itemtype="https://schema.org/Article"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Front-end web programmētāja darba intervijas jautājumi ★ 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="Front-end web programmētāja darba intervijas jautājumi ★ 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="Front-end web programmētāja darba intervijas jautājumi ★ 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/latvian/"><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="Front-end web programmētāja darba intervijas jautājumi ★ 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">Front-end web programmētāja darba intervijas jautājumi</h1></header><div class="content"><h1>Front-end web programmētāja darba intervijas jautājumi</h1><p>Šis repozitorijs satur vairākus ar front-end web programmētāja darba prasmēm saistītus jautājumus, ko var izmantot, intervējot potenciālos vakances kandidātus. Nav ieteicams izmantot katru šeit minēto jautājumu, jo tas patērētu ļoti daudz laika. Izvēlieties tikai dažus jautājumus no šī saraksta, kas Jums palīdzēs ātrāk atlasīt kandidātus ar nepieciešamajām prasmēm.</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> raksts ir ļoti piemērota lasāmviela, kuru izlasīt pirms dodaties uz darba interviju.</p><p><strong>Piezīme:</strong> Paturiet prātā, ka daudzi no šiem jautājumiem ir atvērta tipa, kas varētu izvērsties plašākā diskusijā un ļautu iepazīt cilvēka prasmes daudz labāk nekā tieša atbilde.</p><h2 id="saturs" tabindex="-1"><a class="header-anchor" href="#saturs"></a> <a name="toc">Saturs</a></h2><ol><li><a href="#contributors">Sākotnējie Kontributori</a></li><li><a href="#general">Vispārēji Jautājumi</a></li><li><a href="#html">HTML Jautājumi</a></li><li><a href="#css">CSS Jautājumi</a></li><li><a href="#js">JS Jautājumi</a></li><li><a href="#jquery">jQuery Jautājumi</a></li><li><a href="#jscode">Kodēšanas Jautājumi</a></li><li><a href="#fun">Interesanti Jautājumi</a></li><li><a href="#references">Citas Lieliskas Atsauces</a></li></ol><h4><a href="#toc">[⬆]</a> <a name="contributors">Sākotnējie Kontributori:</a></h4><p>Vairums no jautājumiem tika paņemti no <a href="http://oksoclap.com/">oksoclap</a> raksta, ko sākotnēji izveidoja <a href="http://paulirish.com">Paul Irish</a> (<a href="http://twitter.com/paul_irish">@paul_irish</a>) un kuru papildināja sekojoši cilvēki:</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">Vispārēji Jautājumi:</a></h4><ul><li>Ko jaunu Jūs apguvāt vakar/šonedēļ?</li><li>Kas Jūs aizrauj un interesē programmēšanā?</li><li>Kādas UI (lietotāja interfeisa), performances, SEO, apkopes vai tehnoloģijas apsvērumus jūs ņemat vērā, kad veidojat web-aplikāciju vai mājas lapu?</li><li>Pastāstiet par sev vēlemo darba vidi. (Operētājsistēma, pārlūki, rīki utt.)</li><li>Vai variet aprakstīt savu darba procesu, kad veidojiet mājas lapu?</li><li>Vai jūs variet aprakstīt starpību starp “progressive enhancement” un “graceful degradation”?<ul><li>Bonus punkti, ja tiek pieminēta funkciju noteikšana (feature detection).</li></ul></li><li>Izskaidrojiet, ko nozīmē “Semantisks HTML”.</li><li>Kā Jūs optimizētu mājas lapas failus/resurus?<ul><li>Potenciāli vairāki risinājumu, starp kuriem būtu:<ul><li>Failu konkatenācija (savienošana)</li><li>Failu minimizēšana</li><li>CDN hostēšana</li><li>Kešošana</li><li>u.c.</li></ul></li></ul></li><li>Kāpēc ir labāk lapas resurus izvietot uz vairākiem domēniem?<ul><li>Cik daudz resursus pārlūks spēj vienlaicīgi lejuplādēt no viena domēna?</li></ul></li><li>Nosauciet 3 veidus, kā samazināt lapas ielādes laiku (šķietamo vai faktisko)</li><li>Kā Jūs rīkotos, ja Jūs pievienotos projektam un viņi izmantotu tabulāciju, bet Jūs atstarpes koda atkāpju veidošanai?<ul><li>Ieteiktu projektā izmantot kaut ko līdzīgu EditorConfig (<a href="http://editorconfig.org">http://editorconfig.org</a>)</li><li>Pieskaņoties kolēģiem</li><li>Veikt retabulāciju ar ‘:retab!’ komandu</li></ul></li><li>Izveidojiet vienkāršū slaidrāža lapu<ul><li>Bonus punkti, ja netiek izmantots JavaScript</li></ul></li><li>Kādus rīkus Jūs izmantojiet, lai pārbaudītu sava koda veiktspēju (performanci)?<ul><li>Profiler, JSPerf, Dromaeo</li></ul></li><li>Ja šogad Jūs varētu pilnībā apgūt vienu tehnoloģiju, kura tā būtu?</li><li>Kādas ir atšķirības starp Long-Polling, Websockets un SSE?</li><li>Izskaidrojiet standartu un standartizēšanas komisiju nozīmi.</li><li>Kas ir FOUC? Kā izvairīties no FOUC?</li></ul><h4><a href="#toc">[⬆]</a> <a name="html">HTML Jautājumi:</a></h4><ul><li>Ko dara <code>doctype</code>?</li><li>Kāda ir starpība starp standarta režīmu un quirks režīmu?</li><li>Kādi ir XHTML lapu ierobežojumi?<ul><li>Vai var rasties problēmas, ja lapa tiek servēta kā <code>application/xhtml+xml</code>?</li></ul></li><li>Kā servēt lapu ar saturu vairākās valodās?<ul><li>Par ko ir īpaši jāpiedomā, kad dizainē vai izstrādā vairāku valodu mājas lapas?</li></ul></li><li>Ar ko ir noderīgi <code>data-</code> atribūti?</li><li>Pieņemot, ka HTML5 ir atvērta web-platforma, kas ir HTML5 pamatelementi?</li><li>Aprakstiet atšķirības starp sīkdatnēm (cookies), sessionStorage un localStorage.</li></ul><h4><a href="#toc">[⬆]</a> <a name="css">CSS Jautājumi:</a></h4><ul><li>Aprakstiet, ko dara “reset” CSS fails un ar ko tas ir noderīgs.</li><li>Aprakstiet Float parametru un to, kā tas strādā.</li><li>Kādas ir dažādas Clear parametra lietošanas tehnikas un kādā kontekstā katra ir vispiemērotākā?</li><li>Izskaidrojiet, kas ir CSS spraiti (sprites) un kā Jūs tos izmantotu lapā?</li><li>Kāda ir Jūsu iecienītākā attēlu aizvietošanas tehnika un kādos brīžos Jūs to izmantojiet?</li><li>CSS parametru hacki, nosacīti iekļauti .css faili vai kas cits?</li><li>Kā Jūs servējat lapas priekš pārlūkiem ar ierobežotu funkcionalitāti?<ul><li>Kādas tehnikas/procesu Jūs piekopjat?</li></ul></li><li>Kādi ir dažādi paņēmieni, kā vizuāli noslēpt saturu (un padarīt to pieejamu tikai priekš ekrāna lasītājiem)?</li><li>Vai esat kādreiz izmantojis režģa (grid) sistēmu? Ja jā, tad kurai dodiet priekšroku?</li><li>Vai esat izmantojis mediju vaicājumus (media queries) vai izkārtojumus(layouts)/CSS domātus speciāli priekš mobilajām iekārtām?</li><li>Vai esat pazīstams ar SVG stilu definēšanu?</li><li>Kā Jūs optimizējiet mājas lapas priekš printēšanas?</li><li>Kādi ir dažādi triki un paņēmieni (kā arī ar ko der uzmanīties), lai veidotu efektīvu CSS?</li><li>Kādi ir plusi/mīnusi izmantojot CSS preprocesorus? (SASS, Compass, Stylus, LESS)<ul><li>Aprakstiet plusus un mīnusus tiem CSS preprocesoriem, kurus esiet izmantojis.</li></ul></li><li>Kā Jūs veidotu mājas lapas dizainu, kas izmanto nestandarta fontus?<ul><li>Webonti (tādi fontu servisi kā Google Webfonts, Typekit u.c.)</li></ul></li><li>Izskaidrojiet kā pārlūks nosaka kuri elementi atbilst CSS selektoriem?</li><li>Izskaidrojiet kā Jūs saprotiet “box model” un kā Jūs ar CSS palīdzību norādītu pārlūkam attēlot izkārtojumu(layout) ar dažādiem “box model” iestatījumiem.</li></ul><h4><a href="#toc">[⬆]</a> <a name="js">JS Jautājumi:</a></h4><ul><li>Izskaidrojiet notikumu deleģēšanu (event delegation)</li><li>Izskaidrojiet kā <code>this</code> strādā JavaScript valodā</li><li>Izskaidrojiet kā strādā prototipiskā mantošana?</li><li>Kā Jūs testējat savu JavaScript kodu?</li><li>AMD vai CommonJS?</li><li>Kas ir asociatīvais masīvs (hashtable)?</li><li>Paskaidrojiet kāpēc šis kods nestrādā kā IIFE: <code>function foo(){ }();</code>.<ul><li>Kas ir jāpamaina, lai tā pareizi strādātu kā IIFE?</li></ul></li><li>Kāda ir atšķirība starp mainīgajiem, kas ir definēti kā: <code>null</code>, <code>undefined</code> or <code>undeclared</code>?<ul><li>Kā jūs pārbaudītu vai mainīgais atbilst kādam no šiem stāvokļiem?</li></ul></li><li>Kas ir slēgums(closure) un kā/kāpēc Jūs tādu izmantotu?</li><li>Kādos gadījumos parasti tiek izmantotas anonīmās funkcijas?</li><li>Izskaidrojiet “JavaScript module pattern” un kādos gadījumos Jūs to izmantotu.<ul><li>Bonus punkti, ja tiek pieminēta tīra nosaukumvietas uzturēšana (clean namespacing)</li><li>Gadījumā ja Jūsu moduļi neizmanto nosaukumvietu?</li></ul></li><li>Kā Jūs organizējat savu kodu? (Moduļu veidā, klasiskā mantošana?)</li><li>Kāda ir atšķirība starp “host” objektiem un “native” objektiem?</li><li>Kāda ir atšķirība starp: <code>function Person(){}</code>, <code>var person = Person()</code>, un <code>var person = new Person()</code>?</li><li>Kāda ir atšķirība starp <code>.call</code> un <code>.apply</code>?</li><li>Izskaidrojiet <code>Function.prototype.bind</code>?</li><li>Kurā brīdī Jūs optimizējiet savu kodu?</li><li>Vai variet izskaidrot kā JavaScript valodā strādā mantošana?</li><li>Kādos gadījumos Jūs izmantotu <code>document.write()</code>?<ul><li>Vairums reklāmas joprojām izmanto <code>document.write()</code> kaut arī šāda prakse tiek pelta.</li></ul></li><li>Kāda ir atšķirība starp funkciju noteikšanu (feature detection), funkciju secināšanu (feature inference) un UA virknes (UA string) izmantošanu?</li><li>Izskaidrojiet AJAX cik vien detalizēti iespējams</li><li>Izskaidrojiet kā stradā JSONP (un kā tas atšķiras no AJAX)</li><li>Vai esat jebkad izmantojuši JavaScript šablonošanai (templating)?<ul><li>Ja jā, kuras bibliotēkas Jūs esat izmantojuši? (Mustache.js, Handlebars etc.)</li></ul></li><li>Izskaidrojiet “hoisting”</li><li>Izskaidrojiet notikumu burbuļošanu (event bubbling)</li><li>Kāda ir atšķirība starp atribūtu un rekvizītu (property)?</li><li>Kāpēc paplašināt iebūvētos JavaScript objektus nav laba doma?</li><li>Kāpēc paplašināt “built ins” ir laba doma?</li><li>Kāda ir atšķirība starp “document load” un “document ready” notikumu?</li><li>Kāda ir atšķirība starp <code>==</code> un <code>===</code>?</li><li>Paskaidrojiet kā Jūs iegūtu kverija stringa parametru no pārlūka loga URL?</li><li>Izskaidrojiet vietējās izcelsmes (same-origin) noteikumu attiecībā uz JavaScript</li><li>Izskaidrojiet mantošanas paternus JavaScript valodā.</li><li>Lieciet šim strādāt:</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>Izskaidrojoet memoizācijas stratēģiju (izvairīšanos no aprēķinu atkārtošanas) JavaScript valodā.</li><li>Kāpēc to sauc par ternāru izteiksmi (Ternary expression)? Uz ko norāda vārds ternārs?</li><li>Kas ir funkcijas “arity”?</li><li>Kas ir <code>"use strict";</code>? Kādas ir priekšrocības un trūkumi to izmantojot?</li></ul><h4><a href="#toc">[⬆]</a> <a name="jquery">jQuery Jautājumi:</a></h4><ul><li>Izskaidrojiet savirknēšanu (chaining).</li><li>Izskaidrojiet novēlojumus (deferreds).</li><li>Kādas ir jQuery specifiskas optimizācijas, ko Jūs spējat ieviest praksē?</li><li>Ko veic <code>.end()</code>?</li><li>Kā un kāpēc Jūs nosauktu pievienotu notikumu apdarinātāju (bound event handler)?</li><li>Nosauciet 4 dažādas vērtības, ko Jūs varat padot jQuery metodei<ul><li>Selektoru (virkne), HTML (virkne), atgriezenisko funkciju (funkcija), HTMLElement, Object, Array, Element Array, Jquery Object u.c.</li></ul></li><li>Kas ir efektu (vai fx) rinda?</li><li>Kāda ir atšķirība starp <code>.get()</code>, <code>[]</code>, un <code>.eq()</code>?</li><li>Kāda ir atšķirība starp <code>.bind()</code>, <code>.live()</code>, un <code>.delegate()</code>?</li><li>Kāda ir atšķirība starp <code>$</code> un <code>$.fn</code>? Vai vienkārši kas ir <code>$.fn</code>?</li><li>Optimizējiet šo selektoru</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><h4><a href="#toc">[⬆]</a> <a name="jscode">Kodēšanas Jautājumi:</a></h4><pre class="language-javascript"><code class="language-javascript"><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></code></pre><p><em>Jautājums: Izveidojiet modulo funkciju, kas apmierina augstākminēto</em></p><pre class="language-javascript"><code class="language-javascript"><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></code></pre><p>*Jautājums: Kāda vērtība tiek atgriezta no augšākminētā koda?</p><p><strong>Atbilde: “goh angasal a m’i”</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><em>Jautājums: Kāda ir <code>window.foo</code> vērtība?</em></p><p><strong>Atbilde: “bar”</strong> <em>(vienīgi°ja <code>window.foo</code> “falsey”, savādāk tas paturētu savu esošo vērtību)</em></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><em>Jautājums: Kāds ir abu augstākminēto paziņojumu iznākums?</em></p><p><strong>Atbilde: “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><em>Jautājums: Kāda ir <code>foo.length</code> vērtība?</em></p><p><strong>Atbilde: <code>2</code></strong></p><h4><a href="#toc">[⬆]</a> <a name="fun">Interesanti Jautājumi:</a></h4><ul><li>Kas ir pati foršākā lieta, ko jebkat esiet uzprogrammējis un ar ko lepojaties?</li><li>Kuras ir Jūsu izstrādes rīku iemīļotākās funkcijas, kuras izmantojiet?</li><li>Vai Jums ir kādi hobiju projekti? Kādi?</li><li>Kāda ir Jūsu iecienītakā Internet Explorer raksturiezīme?</li></ul><h4><a href="#toc">[⬆]</a> <a name="references">Citas Lieliskas Atsauces:</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></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/latvian.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> |