Soru Bankası

let x = 10;
let y = "5";
console.log(x + y);

Seçenekler

console.log(typeof null);

Seçenekler

const arr = [1, 2, 3];
arr.push(4);
console.log(arr.length);

Seçenekler

let a = "5" - 3;
console.log(a);

Seçenekler

const topla = (a, b) => a + b;
console.log(topla(3));

Seçenekler

const ogrenci = {
  ad: "Ali",
  not: 85
};
console.log(ogrenci["ad"]);

Seçenekler

const dizi = [10, 20, 30];
console.log(dizi[3]);

Seçenekler

const matris = [[1,2],[3,4],[5,6]];
console.log(matris[1][0]);

Seçenekler

let isim = "JavaScript";
console.log(isim.toUpperCase());

Seçenekler

let metin = "Merhaba Dünya";
console.log(metin.includes("Dünya"));

Seçenekler

console.log(parseInt("42px"));

Seçenekler

console.log(0.1 + 0.2 === 0.3);

Seçenekler

const selamla = (isim = "Dünya") => "Merhaba, " + isim;
console.log(selamla());

Seçenekler

let x = "Merhaba";
console.log(x[0]);

Seçenekler

const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj).length);

Seçenekler

console.log(Boolean(""));
console.log(Boolean("0"));

Seçenekler

let dizi = [1, 2, 3, 4, 5];
dizi.splice(1, 2);
console.log(dizi);

Seçenekler

let a = [1, 2, 3];
let b = a;
b.push(4);
console.log(a.length);

Seçenekler

const kisi = { ad: "Ali", yas: 25 };
const { ad, yas } = kisi;
console.log(ad, yas);

Seçenekler

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
}
console.log("Bitti");

Seçenekler

let toplam = 0;
for (let i = 1; i <= 3; i++) {
  toplam += i;
}
console.log(toplam);

Seçenekler

const arr = ["a", "b", "c"];
for (let i = arr.length - 1; i >= 0; i--) {
  console.log(arr[i]);
}

Seçenekler

let sonuc = "";
for (let i = 0; i < 3; i++) {
  sonuc += i;
}
console.log(sonuc);

Seçenekler

const arr = [10, 20, 30];
arr.forEach((val, i) => {
  if (i === 1) return;
  console.log(val);
});

Seçenekler

let i = 5;
while (i > 0) {
  i -= 2;
}
console.log(i);

Seçenekler

const meyveler = ["elma", "armut", "çilek"];
for (const meyve of meyveler) {
  if (meyve === "armut") continue;
  console.log(meyve);
}

Seçenekler

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key);
}

Seçenekler

let sayac = 0;
do {
  sayac++;
} while (sayac > 10);
console.log(sayac);

Seçenekler

let x = 0;
if (x) {
  console.log("truthy");
} else {
  console.log("falsy");
}

Seçenekler

let yas = 18;
let sonuc = yas >= 18 ? "Ehliyet alabilir" : "Alamaz";
console.log(sonuc);

Seçenekler

let x = "5";
switch (x) {
  case 5:
    console.log("sayı");
    break;
  case "5":
    console.log("string");
    break;
  default:
    console.log("bilinmiyor");
}

Seçenekler

let not = 75;
let harf;
if (not >= 90) harf = "AA";
else if (not >= 80) harf = "BA";
else if (not >= 70) harf = "BB";
else harf = "CC";
console.log(harf);

Seçenekler

console.log(null == undefined);
console.log(null === undefined);

Seçenekler

let x = 10;
let y = x > 5 ? x > 8 ? "büyük" : "orta" : "küçük";
console.log(y);

Seçenekler

const sayilar = [1, 2, 3, 4, 5];
const sonuc = sayilar.filter(x => x > 3);
console.log(sonuc);

Seçenekler

const isimler = ["Ali", "Ay", "Mehmet"];
const sonuc = isimler.map(x => x.length);
console.log(sonuc);

Seçenekler

const sayilar = [1, 2, 3, 4];
const sonuc = sayilar
  .filter(x => x % 2 === 0)
  .map(x => x * 10);
console.log(sonuc);

Seçenekler

const sayilar = [1, 2, 3];
const sonuc = sayilar.map(x => x * x);
console.log(sonuc);

Seçenekler

const kelimeler = ["Ali", "Veli", "Can", "Ece"];
const sonuc = kelimeler.filter(k => k.length === 3);
console.log(sonuc);

Seçenekler

const arr = [5, 10, 15, 20];
const sonuc = arr.filter(x => x >= 10).map(x => x / 5);
console.log(sonuc);

Seçenekler

const arr = [1, 2, 3, 4, 5];
const sonuc = arr.map(x => x * 2).filter(x => x > 6);
console.log(sonuc);

Seçenekler

const sayilar = [3, 7, 2, 9, 1];
const enBuyuk = Math.max(...sayilar);
console.log(enBuyuk);

Seçenekler

// HTML: <p id="mesaj">Merhaba</p>

const el = document.getElementById("mesaj");
el.textContent = "Selam";
console.log(el.textContent);

Seçenekler

// HTML: <div class="kutu">A</div>
//       <div class="kutu">B</div>

const kutular = document.querySelectorAll(".kutu");
console.log(kutular.length);

Seçenekler

// HTML: <input id="isim" value="Ali">

const el = document.getElementById("isim");
el.value = "Veli";
console.log(el.value);

Seçenekler

// HTML: <ul id="liste">
//         <li>A</li>
//         <li>B</li>
//         <li>C</li>
//       </ul>

const liste = document.getElementById("liste");
console.log(liste.children.length);

Seçenekler

// HTML: <p id="metin">Eski Metin</p>

const el = document.getElementById("metin");
el.innerHTML = "<strong>Yeni</strong> Metin";
console.log(el.textContent);

Seçenekler

// HTML: <button id="btn">Tıkla</button>

const btn = document.getElementById("btn");
btn.onclick = () => { console.log("A"); };
btn.onclick = () => { console.log("B"); };
// butona tıklandığında ne yazdırılır?

Seçenekler

// HTML: <div id="kutu" style="color: red;">Merhaba</div>

const el = document.getElementById("kutu");
el.style.color = "blue";
console.log(el.style.color);

Seçenekler

<!-- Hangisi sırasız (unordered) liste oluşturur? -->

A) <ol><li>Eleman</li></ol>
B) <ul><li>Eleman</li></ul>
C) <dl><li>Eleman</li></dl>
D) <list><item>Eleman</item></list>

Seçenekler

<a href="https://google.com" target="_blank">
  Tıkla
</a>

<!-- target="_blank" ne yapar? -->

Seçenekler

<table>
  <thead>
    <tr>
      <th>Ad</th>
      <th>Not</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Ali</td>
      <td>85</td>
    </tr>
  </tbody>
</table>

<!-- <th> ile <td> arasındaki fark nedir? -->

Seçenekler

<form>
  <input type="email" id="mail" placeholder="E-posta">
  <select id="sehir">
    <option value="">Seçiniz</option>
    <option value="ist">İstanbul</option>
    <option value="ank">Ankara</option>
  </select>
  <button type="submit">Gönder</button>
</form>

<!-- input type="email" ne sağlar? -->

Seçenekler

<!-- Hangisi semantik HTML etiketi DEĞİLDİR? -->

A) <header>
B) <nav>
C) <div>
D) <article>

Seçenekler

<a href="#bolum2">Bölüm 2'ye Git</a>

<!-- ... sayfa içeriği ... -->

<div id="bolum2">
  <h2>Bölüm 2</h2>
</div>

<!-- Bu link ne yapar? -->

Seçenekler

/* Hangisinin önceliği (specificity) en yüksektir? */

p { color: red; }
.metin { color: blue; }
#baslik { color: green; }

Seçenekler

.kutu {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: content-box;
}

/* Kutunun toplam genişliği kaç px? */

Seçenekler

.kutu {
  width: 200px;
  padding: 20px;
  border: 5px solid black;
  box-sizing: border-box;
}

/* Kutunun toplam genişliği kaç px? */

Seçenekler

.container {
  display: flex;
  justify-content: space-between;
}

/* justify-content: space-between ne yapar? */

Seçenekler

.btn {
  background: blue;
  transition: all 0.3s ease;
}
.btn:hover {
  background: red;
  transform: scale(1.1);
}

/* transition ne yapar? */

Seçenekler

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Bu düzende elemanlar nasıl sıralanır? */

Seçenekler

.spinner {
  width: 40px;
  height: 40px;
  border: 4px solid #ccc;
  border-top: 4px solid orange;
  border-radius: 50%;
  animation: don 1s linear infinite;
}

@keyframes don {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* "infinite" ne anlama gelir? */

Seçenekler

// Next.js nedir?

Seçenekler

// app/iletisim/page.tsx

export default function Iletisim() {
  return <h1>İletişim</h1>;
}

// Bu sayfaya hangi URL'den erişilir?

Seçenekler

"use client";

import { useState } from "react";

export default function Sayac() {
  const [sayi, setSayi] = useState(0);
  return <h1>{sayi}</h1>;
}

// "use client" ne işe yarar?

Seçenekler

import Link from "next/link";

export default function Menu() {
  return (
    <>
      <Link href="/hakkimda">Hakkımda (Link)</Link>
      <a href="/hakkimda">Hakkımda (a)</a>
    </>
  );
}

// <Link> ile <a> arasındaki temel fark nedir?

Seçenekler

function Selam(props) {
  return <h1>Merhaba {props.isim}</h1>;
}

// Kullanım:
<Selam isim="Ali" />

// Ekrana ne yazar?

Seçenekler

"use client";
import { useState } from "react";

export default function Sayac() {
  const [sayi, setSayi] = useState(0);
  return (
    <button onClick={() => setSayi(sayi + 1)}>
      {sayi}
    </button>
  );
}

// useState ne işe yarar?

Seçenekler

const [sayi, setSayi] = useState(5);

// useState(5) ifadesindeki 5 nedir?

Seçenekler

"use client";
import { useState } from "react";

export default function Form() {
  const [ad, setAd] = useState("");
  return (
    <>
      <input
        value={ad}
        onChange={(e) => setAd(e.target.value)}
      />
      <p>Merhaba {ad}</p>
    </>
  );
}

// Input'a "Ali" yazılırsa ne olur?

Seçenekler

"use client";
import { useEffect } from "react";

export default function Sayfa() {
  useEffect(() => {
    console.log("Çalıştı");
  }, []);

  return <h1>Merhaba</h1>;
}

// Boş bağımlılık dizisi [] ne anlama gelir?

Seçenekler

// useEffect ne için kullanılır?

Seçenekler

export default function Liste() {
  const meyveler = ["elma", "armut", "çilek"];
  return (
    <ul>
      {meyveler.map((m) => (
        <li key={m}>{m}</li>
      ))}
    </ul>
  );
}

// Ekrana kaç <li> elemanı yazılır?

Seçenekler

const isimler = ["Ali", "Veli"];
return (
  <ul>
    {isimler.map((i) => (
      <li>{i}</li>
    ))}
  </ul>
);

// Bu kodda eksik olan nedir?

Seçenekler

// Bir Counter (Sayaç) uygulamasında sayının değerini her
// tıklamada 1 artırmak için buton üzerinde hangi olay (event)
// tetiklenmelidir?

Seçenekler

// Next.js (App Router) mimarisinde, dosya bazlı yönlendirme
// sistemine göre bir sayfa oluşturmak için dosya adı ne olmalıdır?

Seçenekler

// Next.js'te veri yüklenirken kullanıcıya otomatik olarak
// bir yükleniyor arayüzü göstermek için App Router içinde hangi
// özel dosya ismi kullanılır?

Seçenekler

// Modern tarayıcılarda entegre olarak bulunan ve bir adresten (URL)
// asenkron olarak veri çekmemizi sağlayan fonksiyon hangisidir?

Seçenekler

// Next.js'te dinamik bir rota (dynamic route) oluşturmak için
// klasör ismi nasıl tanımlanmalıdır?

Seçenekler

// API'lerden veri alırken veya veri gönderirken en yaygın kullanılan,
// insan tarafından okunabilen hafif veri değişim formatı hangisidir?

Seçenekler

// Kullanıcı bir input alanına yazı yazarken klavyeden bir tuşu
// elinden çektiği anı yakalamak için hangi event listener kullanılır?

Seçenekler

// React'ta props verileri hakkında aşağıdakilerden hangisi doğrudur?

Seçenekler

// Bir web API'sine istek attıktan sonra gelen JSON yanıtını
// JavaScript nesnesine dönüştürmek için hangi metot asenkron olarak çağrılır?

Seçenekler

// app/users/[id]/page.js
// URL /users/123 olduğunda params.id değeri ne olur?

Seçenekler

// React'ta bir state güncellendiğinde aşağıdakilerden hangisi gerçekleşir?

Seçenekler

// Next.js App Router yapısında tüm sayfaların etrafını saran,
// header ve footer gibi ortak bileşenleri bir kez tanımlamamızı
// sağlayan özel dosya hangisidir?

Seçenekler

// React'ta "Counter" uygulamasında state doğrudan
// count = count + 1 şeklinde güncellenirse ne olur?

Seçenekler

// Aşağıdakilerden hangisi geçerli bir useState başlangıç değeri olamaz?

Seçenekler

<button onClick={handleClick()}>Tıkla</button>
// Bu tanımdaki hata nedir?

Seçenekler

// JSON formatındaki bir veride aşağıdakilerden hangisi
// geçerli bir veri türü olarak kullanılamaz?

Seçenekler

// React'ta bir input elementindeki metin her değiştiğinde
// bu değişimi yakalayıp state'e aktarmak için hangi event listener
// kullanılır?

Seçenekler

useEffect(() => {
  // ...
}, [search]);

// Bu efekt ne zaman çalışır?

Seçenekler

// Aşağıdaki kod parçalarından hangisi başarılı bir şekilde
// 1'den başlayan bir sayaç durum (state) yapısı tanımlar?

Seçenekler

// Bir web uygulamasında API (Application Programming Interface)
// temel olarak hangi amaca hizmet eder?

Seçenekler

// React'ta bir fonksiyonel bileşen (Functional Component)
// temelde ne döndürmek (return) zorundadır?

Seçenekler

// Bir JSON verisi stringe çevrildiğinde veya okunurken en dışta
// hangi karakterlerin kullanımı zorunludur?

Seçenekler

"use client";
import { useState } from "react";

export default function Profil() {
  const [girisYapildi, setGirisYapildi] = useState(false);

  return (
    <div>
      {girisYapildi ? <h1>Hoş geldin!</h1> : <h1>Lütfen giriş yap</h1>}
    </div>
  );
}

// JSX içindeki { ... ? ... : ... } yapısının adı ve görevi nedir?

Seçenekler

const yas = 17;
const mesaj = yas >= 18 ? "Reşit" : "Reşit değil";
console.log(mesaj);

// Ekrana ne yazar?

Seçenekler

// Aşağıdakilerden hangisi geçerli bir React functional component
// tanımıdır?

Seçenekler

// Aşağıdaki iki tanım arasındaki fark nedir?

// 1) function Karsila({ isim }) {
//      return <h1>Merhaba {isim}</h1>;
//    }

// 2) const Karsila = ({ isim }) => <h1>Merhaba {isim}</h1>;

Seçenekler