HTML5 Geolocation introduction

Hungarian Geolocation introduction

Update1

The working source can be available here. What is My IP? I put this up here because many of you seek.

Before we start the geolocation let me make a little retrospection. In this article we are going to see how we queried the data of browsers and users in the past. Our best assistance was the “user agent”.

The user agent acts as a client in a network protocol used in communications within a client–server distributed computing system.
Most frequently people use this in case of World Wide Web access applications (web browsers, web crawler etc.). The browers forwarding the “user agent” to the web server which describes the client hardware platform, the operating system, the browsers type and version and its language settings.

Browser information

The easiest way to get the corresponding data is by applying the navigator object of JavaScript. This is useful only if we use this when we writing JavaScript programs because due to the different JavaScript command interpretation problems can arise during development what is easier to handle like this.

The navigator objects element variable and element function can be called directly.

Let’s look at the different elements:

appCodeName – Returns the code name of the browser
appName – Returns the name of the browser
appVersion – Returns the version information of the browser
platform – Returns for which platform the browser is compiled
cookieEnabled – Determines whether cookies are enabled in the browser
userAgent – Returns the browsers more important data

Let’s see a simple example for this:

<!DOCTYPE HTML>
 <html>
 <head>
 <title>HTML5 Browser and User information</title>
 <meta charset="UTF-8">
 </head>
 <body>
 <header>

<h1>Browser</h1>
 </header>

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

<!- Querying browsers parameters -->
 <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>

The working source can be available here!

Querying IP address

If you take a look you can see that quite a lof of information can extract with the help of a not too complicated code.
With the use of JSON Api our visitors IP address is obtainable aswell. I don’t want to detail – because it is well known – that IP address is our digital fingerprint on the Internet. A lot of information can be obtainable whit its use about the user or about his/her location, ISP data etc.

Let’s see how our extended code looks like:

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

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

<!- Querying browsers parameters -->
 <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>

<!- Querying IP address with json api -->
 <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>

The working source can be available here. What is My IP?

In the next part we are going to see and check the HTML5 Geolocation tools. Don’t be snap on me if this post was commonplace for you but the comparison shows better that whereof HTML5 is capable.

Creative Commons Licenc
Geolocation introduction 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 https://html5.ugyesen.com.

You may also like...