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); } }); }) }
|