Post
Ask Question

Window Navigator In TypeScript

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
  1. class window_navigator  
  2. {  
  3.  navigator()  
  4.  {  
  5.   var txt;  
  6.   txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";  
  7.   txt += "<p>Browser Name: " + navigator.appName + "</p>";  
  8.   txt += "<p>Browser Version: " + navigator.appVersion + "</p>";  
  9.   txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";  
  10.   txt += "<p>Platform: " + navigator.platform + "</p>";  
  11.   txt += "<p>User-agent header: " + navigator.userAgent + "</p>";  
  12.   txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>";  
  13.   document.getElementById("content").innerHTML = txt;  
  14.  }  
  15. }  
  16. window.onload = () =>  
  17.  {  
  18.   var win = new window_navigator();  
  19.   win.navigator();  
  20.  };  
Window_Navigator.htm
  1. <!DOCTYPEhtml>  
  2. <htmllang="en"  
  3.     xmlns="http://www.w3.org/1999/xhtml">  
  4.     <head>  
  5.         <metacharset="utf-8"/>  
  6.         <title>Navigator in TypeScript</title>  
  7.         <linkrel="stylesheet"href="app.css"type="text/css"/>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <h2style="color:#0026ff">Window Navigator in TypeScript  
  13.         </h2>  
  14.         <divid="content"style="color:#0c8813"/>  
  15.     </body>  
  16. </html>  
app.js
  1. var window_navigator = (function() {  
  2.  function window_navigator() {}  
  3.  window_navigator.prototype.navigator = function() {  
  4.   var txt;  
  5.   txt = "<p>Browser CodeName: " + navigator.appCodeName + "</p>";  
  6.   txt += "<p>Browser Name: " + navigator.appName + "</p>";  
  7.   txt += "<p>Browser Version: " + navigator.appVersion + "</p>";  
  8.   txt += "<p>Cookies Enabled: " + navigator.cookieEnabled + "</p>";  
  9.   txt += "<p>Platform: " + navigator.platform + "</p>";  
  10.   txt += "<p>User-agent header: " + navigator.userAgent + "</p>";  
  11.   txt += "<p>User-agent language: " + navigator.systemLanguage + "</p>";  
  12.   document.getElementById("content").innerHTML = txt;  
  13.  };  
  14.  return window_navigator;  
  15. })();  
  16. window.onload = function() {  
  17.  var win = new window_navigator();  
  18.  win.navigator();  
  19. };  
Output 
 
window-navigator-image.gif
 
Referenced By
http://www.typescriptlang.org/


Similar Articles