yoklateknik mülakat
GelişimGeçmiş

Frontend Junior Mülakat Soruları

1923 doğrulanmış Frontend Junior mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

AccessibilityZorluk 1
Etkileşimli bir kontrol için neden genellikle native bir <button> elementi, tıklanabilir bir <div>'e tercih edilir?
  • aÇünkü düz bir <div>, çok miktarda ekstra CSS olmadan görsel olarak bir butona benzetilemez
  • bÇünkü <button> elementleri tarayıcı tarafından <div>'lerden daha hızlı boyanır
  • cÇünkü native <button> klavyeyle focus alıp çalıştırılabilir ve assistive tech'e button role'ü sunar✓
  • dÇünkü HTML spesifikasyonu, etkileşimli olmayan bir <div>'e click handler eklenmesini yasaklar
Açıklama:Native <button>; klavye focus'u, Enter/Space ile çalıştırma ve ekran okuyucunun duyurduğu button role'ünü ekstra iş yapmadan verir. <div> bunların hiçbirini kendiliğinden almaz; CSS ile butona benzetmek (a) mümkündür ve <div>'e click handler eklemek serbesttir (d) — sadece erişilebilir değildir.
AccessibilityZorluk 1
Bir <img> elementindeki alt attribute'unun temel amacı nedir?
  • aGörseli göremeyen kullanıcılar için onu tanımlayan bir metin alternatifi sağlamak✓
  • bSayfaya gelen her ziyaretçi için görselin altında görünür bir caption göstermek
  • cGörsel dosyasının tarayıcı tarafından ne kadar hızlı indirilip çözüleceğini iyileştirmek
  • dFare işaretçisi görselin üzerine geldiğinde çıkan tooltip metnini belirlemek
Açıklama:alt; ekran okuyucu kullanıcılarına ve görselin yüklenemediği durumlara, görselin içeriğinin metin karşılığını verir. Görünür bir caption (b) değildir; hover tooltip'i de değildir — o title attribute'udur (d).
AccessibilityZorluk 2
<!-- A -->
<div class="btn" onclick="save()">Save</div>

<!-- B -->
<button class="btn" onclick="save()">Save</button>

İkisi de fareyle tıklandığında save() çağırıyor. Hangi ifade doğrudur?
  • aEşdeğerdirler, çünkü onclick handler'ı her iki element için de aynı şekilde tetiklenir
  • bA daha iyidir, çünkü bir <div>, <button>'a göre daha esnek şekillendirilebilir
  • cİkisi de erişilemez, çünkü inline onclick handler'ları ekran okuyucular tarafından tamamen yok sayılır
  • dYalnızca B Tab ile erişilip klavyeyle çalıştırılabilir; A'nın buna denk olması için ekstra iş gerekir✓
Açıklama:<button> focus alır ve Enter/Space'e kutudan çıktığı gibi yanıt verir; böylece klavye ve ekran okuyucu kullanıcıları onu kullanabilir. <div> ise tabindex, role ve key handler eklenmedikçe yalnızca fare tıklamasına yanıt verir — inline onclick'in kendisi yok sayılmaz (c), sadece klavye desteği eklemez.
AccessibilityZorluk 2
E-posta adresi için bir text input'un var; yanında ayrı bir <span> içinde görünür 'Email' yazısı duruyor. Ekran okuyucu kullanıcısı alana tab'ladığında yalnızca 'edit text' duyuyor, label yok. Doğru düzeltme nedir?
  • a<span>'e bir title attribute'u ekleyip metninin alanla birlikte duyurulmasını sağlamak
  • bfor değeri input'un id'siyle eşleşen bir <label for="..."> kullanmak✓
  • cInput'u bir <div role="label"> içine sarıp tarayıcının yakındaki metni ona bağlamasını sağlamak
  • dInput'a placeholder="Email" koyup amacının kullanıcıya duyurulmasını sağlamak
Açıklama:for değeri input'un id'siyle eşleşen bir <label> (ya da input'u saran bir <label>) programatik bir bağ kurar; böylece alan 'Email' olarak duyurulur. placeholder (d) güvenilir bir label değildir — yazmaya başlayınca kaybolur ve tutarsız duyurulur — ve role="label" diye bir şey yoktur (c).
AccessibilityZorluk 1
aria-label attribute'u ne yapar?
  • aEkranda elementin yanında gösterilen görünür bir metin label'ı belirler
  • bElementi dekoratif olarak işaretler ki assistive technology onu atlasın
  • cElement için assistive tech'in duyurduğu bir erişilebilir isim (accessible name) sağlar✓
  • dYalnızca element focus aldığında gösterilen daha uzun bir yardım açıklaması tutar
Açıklama:aria-label, ekranda hiçbir şey göstermeden elemente ekran okuyucuların duyurduğu bir accessible name verir — yalnızca ikon içeren butonlar için faydalıdır. Görünür değildir (a) ve elementi gizlemez (b); gizleyen aria-hidden'dır.
AccessibilityZorluk 2
Bir sayfa, tamamen görsel süs amaçlı küçük bir dekoratif kıvrım görseli kullanıyor; hiçbir bilgi taşımıyor. Bu <img> erişilebilirlik için nasıl işaretlenmeli?
  • aalt="iki bölüm arasındaki dekoratif kıvrım ayıracı" gibi tanımlayıcı bir alt verilmeli
  • balt attribute'u tamamen kaldırılmalı ki tarayıcı nasıl duyuracağına kendisi karar versin
  • crole="img" ve kıvrımı ekran okuyucu kullanıcılarına tarif eden bir aria-label eklenmeli
  • dBoş alt="" verilmeli ki assistive technology onu dekoratif kabul edip atlasın✓
Açıklama:Boş alt="", ekran okuyuculara görselin dekoratif olduğunu ve yok sayılabileceğini söyler; gürültüyü önler. Anlamsız bir süsü tarif etmek (a) kalabalık yaratır; alt'ı tamamen kaldırmak (b) ise birçok ekran okuyucunun görseli atlamak yerine dosya adını okumasına yol açar.

Konular

Accessibility 75Angular Change Detection 75Angular Components Lifecycle 75Angular Dependency Injection 75Angular Directives Pipes 75Angular Router Forms 75Angular Testing Performance 75Css Layout 75Dom Browser Apis 75Javascript Async Concurrency 75Javascript Language 75Javascript Memory Performance 75Javascript Modules Bundling 75Javascript Prototypes Oop 75Javascript Runtime Apis 75Javascript Testing Tooling 75Performance 75React Components Jsx 75React Context State 75React Effects Lifecycle 75React Forms Suspense 75React Hooks State 75React Rendering Performance 75Rendering Reactivity 75State Management 75Testing 75Typescript Advanced Types 75Typescript Generics 75Typescript Modules Declarations 75Typescript Narrowing Control Flow 75Typescript Tooling Config 75Typescript Type Fundamentals 75Vue Components Props 75Vue Composition Api 75Vue Directives Templates 75Vue Performance Testing 75Vue Reactivity System 75Vue Router State Management 75Web Security 75

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla