Veriyi DOM'a basma

Gelen veriyi template literals ve textContent ile arayüze yansıtırsın.

Veriyi ekrana basmak

Sunucudan gelen veriyi ekrana yansıtmak için weatherResult.textContent özelliğini kullanırız. Bu özellik bir öğenin metin içeriğini ayarlar. Şehir adını ve hava bilgisini tek bir dizede birleştirmek için şablon dizi (template literal) kullanırız: ters tırnak içinde ${değişken} yazarak değerleri gömeriz. `${city}: ${info}` örneğinde city ve info değerleri tek dizede birleşir. Sonucu textContent'e atadığımızda ekranda görünür.

Şablon diziler

Şablon dizi (template literal), ters tırnak içinde yazılan bir dizedir. İçine ${} ile değer gömebilirsin. `${city} - ${info}` yazınca city ve info değişkenlerinin değerleri dizede yer alır. Tırnak veya artı işaretiyle birleştirme yapmana gerek yoktur. Şablon diziler ayrıca birden çok satıra yayılabilir; \n kaçış dizisi yerine doğrudan satır başı yapabilirsin. Bu özellik veriyi ekrana basarken okunabilir kod yazmayı kolaylaştırır.

Uygulama renderWeather işlevini tanımla

Önceki dersin çözümünün üzerine devam et. Bir function renderWeather(city, info) tanımla. İçinde weatherResult.textContent özelliğine `${city}: ${info}` şablon dizisini ata. Böylece şehir ve hava bilgisi tek satırda ekrana basılır.

Örnek çözümü göster

const app = document.querySelector("#app");
const cityInput = document.querySelector("#cityInput");
const getWeatherButton = document.querySelector("#getWeatherButton");
const weatherResult = document.querySelector("#weatherResult");
console.log(app, cityInput, getWeatherButton, weatherResult);

function getWeather() {
  const city = cityInput.value;
  console.log(city);
}

getWeatherButton.addEventListener("click", getWeather);

async function fetchWeather(city) {
  const url = `https://api.example.com/weather?city=${city}`;
  const response = await fetch(url);
  const info = await response.text();
  return info;
}

function renderWeather(city, info) {
  weatherResult.textContent = `${city}: ${info}`;
}

Kendini test et

Sonucu şablon diziyle ata

weatherResult.textContent = ____;

Cevabı göster

weatherResult.textContent = `${city}: ${info}`;

Hangisi değer birleştirmek için şablon dizi kullanır?
- 'City: ' + city
- 'City: ${city}'
- 'City: city'
- `${city}: ${info}`
Cevabı göster

`${city}: ${info}` — Doğru! Ters tırnak ve ${} ile şablon dizi kurulur.
Render adımlarını eşleştir

template literal

Değerleri birleştirir
textContent

Metni ayarlar
weatherResult

Hedef öğe
${info}

Bilgi değerini gömer
renderWeather parçalarını eşleştir

weatherResult.textContent

Çıktıyı ayarlar
${city}

Şehri gömer
${info}

Bilgiyi gömer

Sıradaki ders: Proje sonu - Hava durumu

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler