Browser and OS detection with Javascript

The power of JavaScript is understood when it comes to the interaction with the devices. Lately, there has been a lot of development in using the language for the development of mobile apps and much more. Mozilla’s Firefox OS has been a great initiator of the whole episode.

But then, JavaScript was just as powerful even when it was created. You could use it to identify the browser and also the Operating System which could be used for data analytics.

So, how is that possible?

Let me create a HTML Structure to put the content in a formatted manner.
I made use of extra tags in order to center the content and also the CSS does the same. The span tags inside console are used to display the content. I used JQuery just for my convenience. It is completely avoidable. But then, JQuery reduces code considerably. The main.css give the styling to the page.

Finally, main2.js does the actual computation.

The navigator object in JavaScript identifies the operating system with its attribute ‘appVersion’. The browser is identified by the sue of its User Agent and also the window object which would defer in certain cases. This is because, Chrome, Safari and the latest versions of Opera all uses the WebKit rendering engine for loading up the webpages.
Once I identify the browser and the OS, I directly add it to the html of the span tags which I referred using the id attribute in html.
And this is what you see on the screen.

Ping me for any doubts. 

Varun is a Software Developer by profession and blogger by passion. He likes to talk about technology and things on the internet that makes life easy.