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