Reader Level:
Articles

Window Navigator In TypeScript

By Nitin Bhardwaj on December 29, 2012
In this article, I will explain how to use the window navigator in TypeScript.
  • 0
  • 0
  • 2693

Introduction

The window.navigator object contains information about the visitor's browser. It can also tell you if cookies and Java are enabled by the user. One of the more interesting properties is the user agent string. This information is sent to every web server. But the user agent string can't be trusted for many web browsers because it can be changed by the user.

The following example shows information about the visitor's browser with the help of the window navigator using TypeScript.

Step 1

Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.

Give the name of your application as "Window_Navigator" and then click ok.

Step 2

After this session the project has been created; a new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts file, js file and css files.

Coding

window_navigator.ts

class window_navigator

{   

    navigator()

    {

        var txt;

        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 header: " + navigator.userAgent + "</p>";

        txt+= "<p>User-agent language: " + navigator.systemLanguage + "</p>";

        document.getElementById("content").innerHTML=txt;

    }

}

window.onload = () =>

{

    var win = new window_navigator();

    win.navigator();

};

 

Window_Navigator.htm

<!DOCTYPEhtml>

<htmllang="en"xmlns="http://www.w3.org/1999/xhtml">

<head>

    <metacharset="utf-8"/>

    <title>Navigator in TypeScript</title>

    <linkrel="stylesheet"href="app.css"type="text/css"/>

    <scriptsrc="app.js"></script>

</head>

<body>

    <h2style="color:#0026ff">Window Navigator in TypeScript</h2>

    <divid="content"style="color:#0c8813"/>

</body>

</html>

 

app.js

var window_navigator = (function () {

    function window_navigator() { }

    window_navigator.prototype.navigator = function () {

        var txt;

        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 header: " + navigator.userAgent + "</p>";

        txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>";

        document.getElementById("content").innerHTML = txt;

    };

    return window_navigator;

})();

window.onload = function () {

    var win = new window_navigator();

    win.navigator();

};

//@ sourceMappingURL=app.js.map

 

Output 


window-navigator-image.gif

 

Reference By

http://www.typescriptlang.org/

Nitin Bhardwaj

Normal 0 false false false EN-US X-NONE X-NONE ... Read more

COMMENT USING

Trending up