Skapa html-sidor med Wikiskolas API: Skillnad mellan sidversioner
Hoppa till navigering
Hoppa till sök
Jens (diskussion | bidrag) |
Jens (diskussion | bidrag) |
||
| Rad 4: | Rad 4: | ||
| | | | ||
Här kommer en beskrivning hur du ska göra för att hämta text från Wikiskolas API och visa den på en hemsida. | Här kommer en beskrivning hur du ska göra för att hämta text från Wikiskolas API och visa den på en hemsida. | ||
*lägg till denna tagg högst upp (eller mellan '''head'''-taggarna) i ditt HTML-dokument: <br /> <script | *lägg till denna tagg som hämtar JQuery högst upp (eller mellan '''head'''-taggarna) i ditt HTML-dokument: <br /><script | ||
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | ||
*Kopiera texten från rutan nedan och spara den som ett '''JavaScript'''-script i den mapp som du har din hemsida sparad i. I exemplet är den sparad i en mapp som heter ''js'' med filnamnet ''parse.js''. | *Kopiera texten från rutan nedan och spara den som ett '''JavaScript'''-script i den mapp som du har din hemsida sparad i. I exemplet är den sparad i en mapp som heter ''js'' med filnamnet ''parse.js''. | ||
| Rad 73: | Rad 73: | ||
}} | }} | ||
*I den HTML-filen som du vill ha texten ska du lägga till en '''tagg''' med ett '''id''' som du ska fästa texten vid. I exemplet till höger är det en '''div''' med '''id = text'''. | *I den HTML-filen som du vill ha texten ska du lägga till en '''tagg''' med ett '''id''' som du ska fästa texten vid. I exemplet till höger är det en '''div''' med '''id = text'''. | ||
*Längst ner i din HTML-fil ska du nu lägga till | *Längst ner i din HTML-fil ska du nu lägga till två '''script'''-taggar som hämtar in det script du kopierade från rutorna ovan. | ||
*Under | *Under taggarna ska du lägga till en ny '''script'''-tagg och det är här du hämtar texten och fäster den vid din tagg. I script-taggen anropar du en funktionen '''api_fetch''' som har två parametrar. Den första är titeln på den sida i Wikiskola du vill hämta texten från och den andra parametern är det '''id''' på den tagg du vill fästa texten vid. I exemplet hämtas texten från en sida på Wikiskola med titeln '''Vad_betyder_ordet_”religion”%3F''' och den texten fästes vid taggen med id: '''text'''. | ||
*Titeln på en Wikiskola-sida hittar du i URL:en genom att se vad som står efter '''title='''.<br /> ''Ex:'' wikiskola.se/index.php?'''title= | *Titeln på en Wikiskola-sida hittar du i URL:en genom att se vad som står efter '''title='''.<br /> ''Ex:'' wikiskola.se/index.php?'''title=Vad_betyder_ordet_”religion”%3F''' | ||
*Nu när du är klar ska du ha skapat: | |||
**En tagg som hämtar JQuery | |||
**Två nya JavaScript-script (parse.js och api_fetch.js) | |||
**Tre script-taggar längst ner i din HTML fil | |||
**En tagg med ett id (text) där texten från Wikiskolas API ska fästas | |||
|| | || | ||
[[Fil:Api_fetch1.png|500px|höger]] | [[Fil:Api_fetch1.png|500px|höger]] | ||
|} | |} | ||
Versionen från 14 februari 2018 kl. 15.04
Hämta text från Wikiskolas API
|
Här kommer en beskrivning hur du ska göra för att hämta text från Wikiskolas API och visa den på en hemsida.
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Lista: (klicka expandera till höger) function parse(text)
{
var textBlock = '';
//En For-loop som går genom varje bokstav i text-blocket hämtat från hemsidan
for(var i = 0; i < text.length; i++)
{
//Byter ut alla 'vanliga' newlines till HTML-newlines
if( text.charAt(i) == '\n' )
{
textBlock+= '<br>';
}
if(text.charAt(i) == '[' && text.charAt(i+1) == '[')
{
while(text.charAt(i-2) != ']' && text.charAt(i-3) != ']')
{
console.log(text.charAt(i));
if(text.charAt(i)==":")
{
i++;
var imageName ="";
while(text.charAt(i-1) != 'g' && text.charAt(i-2) != 'n' && text.charAt(i-3) != 'p')
{
imageName += text.charAt(i);
i++;
}
console.log(imageName);
textBlock+= '<img src =" http://wikiskola.se/images/' + imageName + ' " class ="exbild"/><br>';
}
i++;
}
}
textBlock += text.charAt(i);
}
return textBlock;
}
Lista: (klicka expandera till höger) function api_fetch(title, id)
{
$(function(){
//Ändra från vilken sida du vill hämta text från (kolla i URL:en vad sidan har för title, ex http://wikiskola.se/index.php?title=Huvudsida)
//var title = 'Olika_uppfattningar_av_vad_religion_framför_allt_är.';
$.ajax({
dataType: 'json',
url: 'https://wikiskola.se/api.php?action=query&titles=' + title + '&prop=revisions&rvprop=content&format=json&origin=*&formatversion=2',
success: function(data)
{
//console.log(data)
var text = data.query.pages[0].revisions[0].content
var textBlock = parse(text);
$('#'+id).append(textBlock);
}
});
})
}
|
 |