hugolpz · June 18, 2017 16:41
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Wikidata API</title>
    <meta name="viewport" content="width=device-width">
  <body>
 <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
 <link href="style.css" rel="stylesheet" />
 <script src="script.js" type="text/javascript"></script>

 <h3><b>Wikidata API & Wikipedia API for linguists: Principles & Demonstrations</b></h3>
 <div id="anchor1"></div>
 <hr>
 <div id="anchor2"></div>
 Note: queries are asynchronous, requests and injections may be in different order.

 </body></html>
diff --git a/script.js b/script.js
 /* PRINCIPLES ############################################ */
 // 1. API'S URL:
 // 1a.Parts of the url:
 wd = "https://www.wikidata.org/w/api.php?";
 wp = "https://en.wikipedia.org/w/api.php?"; // list of iso-code = ? ----------------<
 aw = "action=wbgetentities" ; // rather wdpoint
 aq = "action=query" ; // ?rather wppage
 ts = "&sites=enwiki" ; // wd only&required. // list of wiki-code = ? --------------<
 t = "&titles=" // target, wd|wp
 i = "Dragon"; //item, wd|wp
  // i_ht = "＊～米字鍵～" ; // wdpoint|wppage -- +few data
  // i_hs = "＊～米字键～" ; // wdpoint: missing; wppage: redirect (confirmed)
  // i_ht = "中國" ; // wdpoint|wppage -- +many data
  // i_hs = "中国" ; // wdpoint: missing; wppage: redirect (idem)
 l  = "&languages=zh|zh-classical|zh-cn|zh-hans|zh-hant|zh-hk|zh-min-nan|zh-mo|zh-my|zh-sg|zh-tw|fr" ; // wdpoint only
 ps = "&props=sitelinks|labels|aliases|descriptions" ; // wdpoint only
  //sitelinks: all interwikis
  //labels: title without _(tag), for l (languages) only
  //aliases: label of redirect page
 p = "&prop=extracts&exintro&explaintext&exsentences=10" ; // wppage only
 r = "&redirects&converttitles" ; // wppage only
 c = "&callback=?" ;// wd|wp
 f = "&format=json" ;// wd|wp

 //1b. Compose your url:
  urlwd = wd+aw+ts+t+i+l+ps    +c+f; // typical wd query
  url   = wp+aq   +t+i     +p+r+c+f; // typical wp query
 // Examples print in console:
 console.log("1. WD: "+urlwd);
 console.log("2. WP: "+url);

 /* translate *********************************************** */
 var wikidata_translate = function (item,isolang) {
    var url = wd+aw+ts+t+item+l+ps    +c+f, // typical wd query
        iso = isolang+"wiki",
        trad="";
    console.log(url);
    $.getJSON(url, function (json) {
        trad =  json.entities[ Object.keys(json.entities)[0] ].sitelinks[iso].title;
 			console.log("1"+trad);
    })
  //return trad +"y2"+toto;
 };
 console.log(wikidata_translate("Dragon", "zh") /**/)

 //1c. DOM injection:
 //$("body").html('<a href="'+url+'">Link</a>.<br />'+ url); //publish the url.
 // wd+i INconsistently provide variants.

 /* DEMO ################################################## */
 /* 2. TEMPLATING ***************************************** */
 // 2a. Single query :
 function WD(item) {
    url   = wp+aq+t+ item +p+r+c+f;  console.log(url);
    $.getJSON(url, function (json) {
        var item_id = Object.keys(json.query.pages)[0]; // THIS DO THE TRICK !
        var extract = json.query.pages[item_id].extract;
        var result = "<b>En :</b> <t>" + item + "</t> <b>⇒</b> " + extract;
        $('#anchor1').append("<div>"+result+"</div>"); // append
    });
 }; 
 WD("Dragon");

 // 2b. Single query (alternative code):
 function WD_i(item) {
        //var be = item
        url_tpl = wp+aq+t+ item +p+r+c+f;
        $.getJSON(url_tpl, function (data) {
            $.each(data.query.pages, function (i, json) { // THIS DO THE TRICK !
                sent = json.extract.toString();
                result = "<b>En:</b> <t>" + item + "</t> <b>⇒</b> " + sent;
                $('#anchor2').append("<div>"+result+"</div>");// append
            });
        });
 }
 WD_i("unicorn");

 /* LOOP ************************************************** */
 // 2c. LOOP on a list of existing articles
 function WD_list(list) {
    $.each(list, function (a, item) {
        WD_i(item);
    });
 }

 var List = [ "Qilin", "Basilisk", "Biscione", "Chollima", "Cockatrice", "Dragon", "Enfield", "Garuda", "Griffin", "Keythong", "Harpy", "Lindworm", "Manticore", "Mermaid", "Pegasus", "Phoenix", "Salamander", "Sea-horse", "Sea-lion", "Turul", "Unicorn", "Wyver", "Yale"];
 WD_list(List);
diff --git a/scripts b/scripts
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
diff --git a/style.css b/style.css
 @import url(https://fonts.googleapis.com/css?family=Bangers);
 @import url(https://fonts.googleapis.com/css?family=Allura);
 t { 
    font-size: 1.3em;
    font-family: Bangers;
 }
 b {
    color: #F00;
    font-family: Allura;
    font-size: 1.3em;
 }
 div > div {
    box-shadow: 0 0 0 15px #555;
    border: 3px solid #333;
    color: #333;
    margin: 1em;
    padding: 1em;
 }
diff --git a/wikidata-api-via-js.markdown b/wikidata-api-via-js.markdown
	<!DOCTYPE html>
	<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Wikidata API</title>
	<meta name="viewport" content="width=device-width">
	<body>
	<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
	<link href="style.css" rel="stylesheet" />
	<script src="script.js" type="text/javascript"></script>

	<h3><b>Wikidata API & Wikipedia API for linguists: Principles & Demonstrations</b></h3>
	<div id="anchor1"></div>
	<hr>
	<div id="anchor2"></div>
	Note: queries are asynchronous, requests and injections may be in different order.

	</body></html>
	/* PRINCIPLES ############################################ */
	// 1. API'S URL:
	// 1a.Parts of the url:
	wd = "https://www.wikidata.org/w/api.php?";
	wp = "https://en.wikipedia.org/w/api.php?"; // list of iso-code = ? ----------------<
	aw = "action=wbgetentities" ; // rather wdpoint
	aq = "action=query" ; // ?rather wppage
	ts = "&sites=enwiki" ; // wd only&required. // list of wiki-code = ? --------------<
	t = "&titles=" // target, wd\|wp
	i = "Dragon"; //item, wd\|wp
	// i_ht = "＊～米字鍵～" ; // wdpoint\|wppage -- +few data
	// i_hs = "＊～米字键～" ; // wdpoint: missing; wppage: redirect (confirmed)
	// i_ht = "中國" ; // wdpoint\|wppage -- +many data
	// i_hs = "中国" ; // wdpoint: missing; wppage: redirect (idem)
	l = "&languages=zh\|zh-classical\|zh-cn\|zh-hans\|zh-hant\|zh-hk\|zh-min-nan\|zh-mo\|zh-my\|zh-sg\|zh-tw\|fr" ; // wdpoint only
	ps = "&props=sitelinks\|labels\|aliases\|descriptions" ; // wdpoint only
	//sitelinks: all interwikis
	//labels: title without _(tag), for l (languages) only
	//aliases: label of redirect page
	p = "&prop=extracts&exintro&explaintext&exsentences=10" ; // wppage only
	r = "&redirects&converttitles" ; // wppage only
	c = "&callback=?" ;// wd\|wp
	f = "&format=json" ;// wd\|wp

	//1b. Compose your url:
	urlwd = wd+aw+ts+t+i+l+ps +c+f; // typical wd query
	url = wp+aq +t+i +p+r+c+f; // typical wp query
	// Examples print in console:
	console.log("1. WD: "+urlwd);
	console.log("2. WP: "+url);

	/* translate *********************************************** */
	var wikidata_translate = function (item,isolang) {
	var url = wd+aw+ts+t+item+l+ps +c+f, // typical wd query
	iso = isolang+"wiki",
	trad="";
	console.log(url);
	$.getJSON(url, function (json) {
	trad = json.entities[ Object.keys(json.entities)[0] ].sitelinks[iso].title;
	console.log("1"+trad);
	})
	//return trad +"y2"+toto;
	};
	console.log(wikidata_translate("Dragon", "zh") /**/)

	//1c. DOM injection:
	//$("body").html('<a href="'+url+'">Link</a>.<br />'+ url); //publish the url.
	// wd+i INconsistently provide variants.

	/* DEMO ################################################## */
	/* 2. TEMPLATING ***************************************** */
	// 2a. Single query :
	function WD(item) {
	url = wp+aq+t+ item +p+r+c+f; console.log(url);
	$.getJSON(url, function (json) {
	var item_id = Object.keys(json.query.pages)[0]; // THIS DO THE TRICK !
	var extract = json.query.pages[item_id].extract;
	var result = "<b>En :</b> <t>" + item + "</t> <b>⇒</b> " + extract;
	$('#anchor1').append("<div>"+result+"</div>"); // append
	});
	};
	WD("Dragon");

	// 2b. Single query (alternative code):
	function WD_i(item) {
	//var be = item
	url_tpl = wp+aq+t+ item +p+r+c+f;
	$.getJSON(url_tpl, function (data) {
	$.each(data.query.pages, function (i, json) { // THIS DO THE TRICK !
	sent = json.extract.toString();
	result = "<b>En:</b> <t>" + item + "</t> <b>⇒</b> " + sent;
	$('#anchor2').append("<div>"+result+"</div>");// append
	});
	});
	}
	WD_i("unicorn");

	/* LOOP ************************************************** */
	// 2c. LOOP on a list of existing articles
	function WD_list(list) {
	$.each(list, function (a, item) {
	WD_i(item);
	});
	}

	var List = [ "Qilin", "Basilisk", "Biscione", "Chollima", "Cockatrice", "Dragon", "Enfield", "Garuda", "Griffin", "Keythong", "Harpy", "Lindworm", "Manticore", "Mermaid", "Pegasus", "Phoenix", "Salamander", "Sea-horse", "Sea-lion", "Turul", "Unicorn", "Wyver", "Yale"];
	WD_list(List);
	@import url(https://fonts.googleapis.com/css?family=Bangers);
	@import url(https://fonts.googleapis.com/css?family=Allura);
	t {
	font-size: 1.3em;
	font-family: Bangers;
	}
	b {
	color: #F00;
	font-family: Allura;
	font-size: 1.3em;
	}
	div > div {
	box-shadow: 0 0 0 15px #555;
	border: 3px solid #333;
	color: #333;
	margin: 1em;
	padding: 1em;
	}