Időjárástól függő css

Szerző: Gergő | CSS ,JQuery | 2010 August 26. 07:25

Megmutatom hogyan lehet néhány sor javascript segítségével lekérni időjárási adatokat, és azok alapján megváltoztatni az oldal külsejét.

Mi, honnan, miért

Mi ez?

Ez egy Yahoo időjárás API-t használó kód, ami jQuery getJSON() segítségével kér le időjárás adatokat egy adott helyről. Sajnos magyarországon nem sok mérőállomás van, de használni azért még így is lehet.

Honnan az ötlet

Nem török más babérjaira, az ötletet Chris Spooner egy régi cikkéből vettem, kihámoztam a lényeget, hozzáadtam a saját gondolataimat és ebből lett a mai cikk.

Nem török más babérjaira

Miért használd?

Mert nagyon frankó! Igaz, hogy igényel egy kis plusz designer munkát amíg több időjáráshoz is megtervezed az oldal arculatát, viszont utána maradandó élmény esős napon esős oldalt, tűző napsütésben pedig egy forró design látni.

Lássuk a medvét

A cikk végén találtok egy példát és annak a letölthető forrását, ezt a kódot fogjuk most átnézni:

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};
 
function keres(woeid){
	$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?u=c&w="+woeid+"'",function(data){
		var w=data.query.results.item;
		var getclass=w.condition.text;
		var encodedclass = getclass.replace(/\s+/g, '-').toLowerCase();
 
		$('#idojaras').attr('class',encodedclass);
		$('#idojaras .homerseklet').text("Hőmérséklet:" + w.condition.temp + '°');
 
   });
}

A lelke a dolognak ez a két függvény. A második kap egy WOEID-t, aminek a jelentése Where On Earth Id, azaz hol van a földön azonosító. Ezt a Yahoo idjőjárás oldaláról szerezheted meg. Írd be a kereső mezőbe a város nevét, majd a kapott urlben található szám lesz a keresett id. Mint már említettem kevés város van benne, általában megyénként egy, a példában fel is soroltam néhányat.

Essünk neki kisebb részletekben.

1.
2.
3.
4.
5.
6.

$.YQL = function(query, callback) {
    var encodedQuery = encodeURIComponent(query.toLowerCase()),
        url = 'http://query.yahooapis.com/v1/public/yql?q='
            + encodedQuery + '&format=json&callback=?';
    $.getJSON(url, callback);
};

A létrehozzuk a $.YQL függvényt, ami majd két paramétert fog várni, elsőben egy lekérdezést, másodikban egy függvényt ami a visszakapott értékeket feldolgozza.

Az encodedQuery megkapja az első paramétert, olyan formára hozza amit el lehet küldeni url paraméterben, illetve a nagybetüket kicsivé alakítja. Utána van egy vessző, nem biztos hogy mindenki érti mit keres ott. Ez egy rövidítés, hogy ne kelljen az url változó elé megint kiírni hogy var.

Itt van még nekeünk ez a getJSON dolog, ami szintén ismeretlen lehet. Ez egy olyan AJAX hívás, amit más domainek felé is lehet intézni. Alapból a $.post és $.get nem használható arra, hogy mondjuk a 67developer.hu oldalról lekérdezzem, hogy a szekcsokonyvtar.hu oldalon milyen könyvek vannak, hiába vannak egy tárhelyen. Biztonsági okai vannak, hogy ezt nem lehet megtenni. A getJSON ezt az űrt tölti be, kérést indít egy szerverhez, és JSON formátumban kapja vissza az adatokat. Később az is világos lesz mi ez, és hogyan kell kezelni.

Miután létrehoztuk a függvényt, a keres()-ben használni is fogjuk.

1.

$.YQL("select * from rss where url='http://weather.yahooapis.com/forecastrss?u=c&w="+woeid+"'"

Először megmondjuk a YQL-nek, milyen adatokat kérjen le. Ennek a lekérdezésnek az előállításához a Yahoo consolban találtok segítséget. Lehet kísérletezgetni, és ha kreatívak vagytok, nagyon jó ötletek és oldalak születhetnek ha felhasználjátok a sok szolgáltatást.

1.
2.
3.
4.
5.
6.
7.
8.
9.

,function(data){
    var w=data.query.results.item;
    var getclass=w.condition.text;
    var encodedclass = getclass.replace(/\s+/g, '-').toLowerCase();
 
    $('#idojaras').attr('class',encodedclass);
    $('#idojaras .homerseklet').text("Hőmérséklet:" + w.condition.temp + '°');
 
}

Ezután lekezeljük az adatokat amiket visszaad. Ha megtalálta a keresett várost, akkor a data.results.item segítségével lekérjük az első elemet a w változóba. Látható hogy a további adatokat w.condition.temp formában érem el, de honnan is szedem ezeket a dolgokat.

Nyisd meg a példa oldalt, firebugban menj a net fülön belül a JS fülre, és frissíts. Ha minden igaz lesz egy jó ronda link, aminek a JSON füle tartalmazza fa szerkezetben a válasz adatokat. Itt egy kép róla:

w=data.query.results.item; Ugye a válasz a data változóban jött, az első pont után az áll hogy query, ez a fa gyökere, a második pont a results, majd item. Az hogy ezt a w változót létrehoztuk csak egy spórolás, igazából ha az időjárás szövegét akarnám elérni ami a text akkor azt így kellene: data.query.results.item.condition.text . Ha ezt kiiratod valahova, megkapod hogy Fair, legalábbis most olyan volt.

Ha még nem találkoztál ilyesmivel talán ebből kapisgálod hogyan kell elérni az adatokat. a jQuery getJSON függvényéről itt olvashatsz bővebben.

Na de elkanyaraodtam a lényegtől, tehát lekérem a válaszból a w.condition.text értéket, ami tartalmazza, hogy milyen idő van, kisbetüssé alakítom és a spaceket kötőjelre cserélem, mivel css osztályt szeretnék belőlük csinálni. Ha ez megvan, akkor meg is változtatom annak az elemnek az osztályát aminek szeretném. Chris az eredeti példájában a body elemhez fűzte hozzá, ami jó ötlet ha az egész oldalt formázni akarod.

A különböző időjárási visszatérési értékekről pontos leírást ezen az oldalon találhatsz.

Összegzés

Szerintem jó dolog, sok sávszélességet nem eszik, úgyhogy ha van felesleges időd és energiád be lehet építeni bármelyik oldalba, lehet majd én is ráhúzok valami hasonlót a blogra, hogy lásd nem csak a vakvilágba beszélek.

• Példa
• Letöltés

Kapcsolódó cikkek

Hozzászólások