Geolokáció bevezetés

English Geolocation tutorial

Update1

A működő kód itt elérhető/kipróbálható. What is My IP? Ezt ide fel kellett hoznom, mert rengetegen keresik.

Mielőtt elmerülnénk a geolokációban egy kis visszatekintésre szeretnélek elvinni benneteket. Ebben a cikkben megnézzük, hogy a böngésző és a felhasználó egyéb adatait régen hogy is kérdeztük le. Erre legfőképp a user agent volt segítségünkre.

A user agent (felhasználói ügynök) olyan kliensalkalmazás, amely egy elosztott kliens-szerver rendszer kommunikációjában használt hálózati protokollt valósít meg. Leggyakrabban a World Wide Webet elérő alkalmazások (webböngészők, keresőrobotok stb.) esetében használják. A Böngészők továbbítják az User Agent-et a webszervernek, amely leírja a kliens hardver platformját, az operációs rendszerét, a böngésző típusát és verzióját valamint a nyelvi beállításait.

Böngésző adatai

Legegyszerűbben JavaScript segítségével tudunk hozzájutni ezekhez az adatokhoz. Méghozzá a navigator objektum alkalmazásával nyerhetjük ki a megfelelő adatokat.  Mindez akkor hasznos, ha ezeket felhasználjuk JavaScript programjaink írásakor, hiszen az eltérő JavaScript parancsértelmezés miatt problémáink adódhatnak a fejlesztés során, amit így könnyebb lekezelni.

A navigator objektum elemváltozóit és elemfüggvényeit közvetlenül megszólíthatjuk.

Nézzük az egyes elemeket:

  • appCodeName – A böngésző becenevét adja vissza.
  • appName – A böngésző neve
  • appVersion – A böngésző verziószáma
  • platform – A felhasználó gépén telepített operációs rendszer
  • cookieEnabled – Cooki engedélyezett-e vagy sem
  • userAgent – A böngésző fontosabb adatai

Lássunk erre egy egyszerű példát:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Browser and User information</title>
<meta charset="UTF-8">
</head>
<body>
<header><h1>Böngésző</h1>
</header>

<div id="browser"></div>

<!- Böngésző paraméterek lekérdezése -->
<script type="text/javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent: " + navigator.userAgent + "</p>";
document.getElementById("browser").innerHTML=txt;
</script>

</body>
</html>

A működő kód itt elérhető/kipróbálható.

IP cím lekérdezése

Ha megnézitek, látható, hogy meglehetősen sok információ kinyerhető egy nem túl bonyolult kód segítségével. Ha ezt a JSON Api segítségével egy picit felturbózzuk, akkor a látogatónk IP címe is lekérhetővé válik. Nem részletezném – hiszen tudja mindenki nagyon jól-, hogy az IP cím az Interneten a digitális ujjlenyomatunk. Ennek felhasználásával számos információ szerezhető meg a felhasználóról, a tartózkodási helyétől kezdve, a szolgáltatójának adatai, stb.

Lássuk hogy is néz ki a kibővített kódunk:

<!DOCTYPE HTML>
<html>
<head>
<title>HTML5 Browser and User information</title>
<meta charset="UTF-8">
</head>
<body>
<header><h1>Böngésző</h1>
</header>

<div id="browser"></div>

<!- Böngésző paraméterek lekérdezése -->
<script type="text/javascript">

txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";
txt+= "<p>Browser Name: " + navigator.appName + "</p>";
txt+= "<p>Browser Version: " + navigator.appVersion + "</p>";
txt+= "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";
txt+= "<p>Platform: " + navigator.platform + "</p>";
txt+= "<p>User-agent: " + navigator.userAgent + "</p>";
document.getElementById("browser").innerHTML=txt;
</script>

<!- Ip cím lekérése a json api segítségével -->
<script type="text/javascript">
window.onload = function () {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://jsonip.appspot.com/?callback=DisplayIP";
document.getElementsByTagName("head")[0].appendChild(script);
};
function DisplayIP(response) {
document.getElementById("ipaddress").innerHTML = "Your IP Address is " + response.ip;
}
</script>

<div id="ipaddress"></div>

</body>
</html>

A működő kód itt elérhető/kipróbálható. What is My IP?

A következő részben megnézzük, hogy a HTML5 Geolokáció tekintetében milyen eszközökkel lát el minket. Ne haragudjatok, ha valaki számára elcsépelt volt ez a post, de az összehasonlítás jobban megmutatja, hogy a HTML5 mire is képes valójában.

Creative Commons Licenc
Geolokáció bevezetés a Creative Commons Nevezd meg! – Ne add el! – Így add tovább! 2.5 Magyarország Licenc alatt van.
Permissions beyond the scope of this license may be available at http://html5.ugyesen.com.

You may also like...