Webdatenbanken

Wiki-Quelltext dieser Seite.

<language>Javascript</language>
== Bildersuche mit Pixabay.com ==
<code id="5b1e8ed6f0383" hidden>[[PixabayAPI|code]]</code>

Dieses Beispiel verwendet die Pixabay.com API, um nach Bildern zu suchen. Du kannst beliebige Suchbegriffe statt "Ente" eingeben. Die Funktion liefert ein JavaScript-Objekt mit einer Liste von "hits" zurück. In der [https://pixabay.com/api/docs/ Dokumentation] von Pixabay kannst du mehr erfahren.

<code id="5b1e98647eeeb">
function bilderAnzeigen (bilder){
  for(var i=0; i < bilder.hits.length; i++){
    var bild = $('<img style="height:100px" src="'+bilder.hits[i].previewURL+'">');
    $('#bilderAusgabe').append(bild);
  }
}
</code>
<run id="5b1e98647efcc">
$('#bilderAusgabe').html(""); // Anzeigefeld leeren

pixabayAPI("images","Ente",bilderAnzeigen);
</run>

<html>
<div style="padding:8px;border:1px solid #ccc">
<div>#bilderAusgabe</div>
<div id="bilderAusgabe">
</div>
</div>
</html>

Im vorherigen Beispiel wurden einfach alle gefundenen Bilder nebeneinander als img Elemente gelegt. Diesmal sollen detaillierte Informationen zu jedem Bild angezeigt werden:

<code id="5b1e98647ef57">
function bilderDetailsAnzeigen(bilder){
  for(var i=0; i < bilder.hits.length && i < 3; i++){
    var bild = $('<div style="margin:1em;border:1px solid blue;padding:8px">'+
                 '  <img style="height:200px" src="'+bilder.hits[i].largeImageURL+'">'+
                 '  <table></table>'+
                 '</div>');

    // alle Eigenschaften auflisten, die Pixbay liefert
    for(var p in bilder.hits[i]){
      $("table",bild).append($('<tr><td><b>'+p+':</b></td><td>'+bilder.hits[i][p]+'</td></tr>'));
    }
    $('#bilderAusgabeDetail').append(bild);
  }
}
</code>
<run id="5b1e98647f02c">
$('#bilderAusgabeDetail').html(""); // Anzeigefeld leeren

pixabayAPI("images","Ente",bilderDetailsAnzeigen);
</run>

<html>
<div style="padding:8px;border:1px solid #ccc">
<div>#bilderAusgabeDetail</div>
<div id="bilderAusgabeDetail">
</div>
</div>
</html>

== Videosuche mit Pixabay.com ==
<code id="5b1ebabad94d3">
function videosAnzeigen (videos){
  for(var i=0; i < videos.hits.length; i++){
    var url = videos.hits[i].videos["tiny"].url;
    var video = $('<video style="height:100px" src="'+url+'" controls></video>');
    $('#videosAusgabe').append(video);
  }
}
</code>
<run id="5b1ebabad957b">
$('#videosAusgabe').html(""); // Anzeigefeld leeren

pixabayAPI("videos","Enten",videosAnzeigen);
</run>

<html>
<div style="padding:8px;border:1px solid #ccc">
<div>#videosAusgabe</div>
<div id="videosAusgabe">
</div>
</div>
</html>

== Videosuche mit YouTube ==

<code id="5b1ec420914f1" hidden>[[YoutubeAPI|code]]</code>

Die YouTube-Datenbank mit Millionen von Videos lässt sich ebenfalls durchsuchen. Mehr Informationen zum Rückgabeformat finden sich in der [https://developers.google.com/youtube/v3/docs/search#resource Dokumentation] von Google. Im Beispiel werden maximal 6 Videos geladen. Es kann wieder nach einem beliebigen Begriff gesucht werden.

<code id="5b1ec37a16660">
function youtubeAnzeigen (videos){
  for(var i=0; i < videos.items.length && i < 6; i++){
    var url = 'https://www.youtube.com/embed/'+videos.items[i].id.videoId;
    var video = $('<div><b>'+videos.items[i].snippet.title+'</b><br>'+
            '<iframe src="'+url+'" width="320" height="240" src="" frameborder="1" allowfullscreen></iframe></div>');
    $('#youtubeAusgabe').append(video);
  }
}
</code>
<run id="5b1ec37a16746">
$('#youtubeAusgabe').html(""); // Anzeigefeld leeren

youtubeAPI("search","Enten",youtubeAnzeigen);
</run>

<html>
<div style="padding:8px;border:1px solid #ccc">
<div>#youtubeAusgabe</div>
<div id="youtubeAusgabe">
</div>
</div>
</html>

== Wetterdaten mit OpenWeatherMap.org ==

<code id="5b1e9e88c747d" hidden>[[OpenWeatherMapAPI|code]]</code>

Dieses Beispiel verwendet die OpenWeatherMap.org API, um das aktuelle Wetter von einem Ort zu bestimmen. Du kannst beliebige Suchbegriffe statt "Bern" eingeben. In der [https://openweathermap.org/api Dokumentation] von OpenWeatherMap kannst du mehr erfahren.

<code id="5b1e9ec589ad0">
function temeraturAnzeigen(wetter){
  var tabelle = $('<table></table>');

  // alle Eigenschaften auflisten, die OpenWeatherMap liefert
  for(var p in wetter.main){
    tabelle.append($('<tr><td><b>'+p+':</b></td><td>'+wetter.main[p]+'</td></tr>'));
  }
  var sonnenuntergang = new Date(wetter.sys.sunset*1000);
  tabelle.append('<tr><td><b>Sonnenuntergang</b><td><td>'+sonnenuntergang+'</td></tr>')

  $('#temperaturAusgabe').append(tabelle);
}
</code>
<run id="5b1e9ec589b84">
$('#temperaturAusgabe').html(""); // Anzeigefeld leeren

openweathermapAPI ("weather","Bern, CH", temeraturAnzeigen);
</run>

<html>
<div style="padding:8px;border:1px solid #ccc">
<div>#temperaturAusgabe</div>
<div id="temperaturAusgabe">
</div>
</div>
</html>


<code id="5b1ea1a4a64ac">
function vorhersageAnzeigen(wetter){
console.log(wetter)

  // alle Eigenschaften auflisten, die OpenWeatherMap liefert
  for(var i=0; i < wetter.list.length; i++){
    var datum = new Date(wetter.list[i].dt*1000);
    var tag = $('<div><b>'+datum+':</b> '+wetter.list[i].main.temp+' °C </div>');
    $('#vorhersageAusgabe').append(tag);
  }
}
</code>
<run id="5b1ea1a4a6554">
$('#vorhersageAusgabe').html(""); // Anzeigefeld leeren

openweathermapAPI ("forecast","Bern, CH", vorhersageAnzeigen);
</run>

<html>
<div style="padding:8px;border:1px solid #ccc">
<div>#vorhersageAusgabe</div>
<div id="vorhersageAusgabe">
</div>
</div>
</html>