Post
Ask Question

Alert In TypeScript

Introduction

 
An alert box is often used if you want to make sure information comes through to the user and it displays some information to the user.
 
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#.
 
Provide the name of your application as "Alert_Box" and then click "Ok".
 
Step 2
After Step 1 completes 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 file.
 
Coding
 

Alert_box.ts

  1. class alertbox {  
  2.  show() {  
  3.   var str = ( < HTMLTextAreaElement > document.getElementById("Text1")).value;  
  4.   alert("TextBox Value is " + str);  
  5.  }  
  6. }  
  7. window.onload = () => {  
  8.  var msb = new alertbox();  
  9.  var bttn = document.getElementById("Button1");  
  10.  bttn.onclick = function() {  
  11.   msb.show();  
  12.  }  
  13. };  

Alert_BoxDemo.aspx

  1. < !DOCTYPEhtml >  
  2.  <  
  3.  htmllang = "en"  
  4. xmlns = "http://www.w3.org/1999/xhtml" >  
  5.  <  
  6.  head >  
  7.  <  
  8.  metacharset = "utf-8" / >  
  9.  <  
  10.  title > TypeScript HTML App < /title>  
  11.  <  
  12.  linkrel = "stylesheet"  
  13. href = "app.css"  
  14. type = "text/css" / >  
  15.  <  
  16.  scriptsrc = "app.js" > < /script>  
  17.  <  
  18.  /head>  
  19.  <  
  20.  body >  
  21.  <  
  22.  h3 > Alert Box in TypeScript < /h3>  
  23.  <  
  24.  inputid = "Text1"  
  25. type = "text" / >  
  26.  <  
  27.  inputid = "Button1"  
  28. type = "button"  
  29. value = "Show" / >  
  30.  <  
  31.  divid = "content" / >  
  32.  <  
  33.  /body>  
  34.  <  
  35.  /html>  

app.js

  1. var alertbox = (function() {  
  2.  function alertbox() {}  
  3.  alertbox.prototype.show = function() {  
  4.   var str = (document.getElementById("Text1")).value;  
  5.   alert("TextBox Value is " + str);  
  6.  };  
  7.  return alertbox;  
  8. })();  
  9. window.onload = function() {  
  10.  var msb = new alertbox();  
  11.  var bttn = document.getElementById("Button1");  
  12.  bttn.onclick = function() {  
  13.   msb.show();  
  14.  };  
  15. };  
Output 1 
Enter the value in the TextBox then click on the "Show" button.
 
alert-box-in-typescript.jpg
 
Referenced By
 
http://www.typescriptlang.org/


Similar Articles