Sunday, May 22, 2011

JQuery Calculator




The image above is a jquery/javascript calculator developed in ASP.NET 4.0 web template. Here's the functions. I'wont be posting all codes since it will took up space in my post. I'll just post the sqrt() and a number scripts.

The ASPX markup uses plain css for centering and aligning the buttons and html controls. No asp.net server controls are involved. For the jquery processing, im using the id selector.
1:  /* show zero to textbox on page load */  
2:  $("#txtCalc").ready(function () {  
3:    $("#txtCalc").val("0");  
4:  });  
5:  //square root  
6:        $("#btnSqrt").click(function () {  
7:          var text = $("#txtCalc").val();  
8:          //if invalid input,do not execute codes below  
9:          if (text.search("Invalid") != -1) {  
10:            return;  
11:          }  
12:          if (text.length == 1) {  
13:            if (text == "0") {  
14:              return;  
15:            }  
16:            else //text is 3  
17:            {  
18:              var x = parseFloat($("#txtCalc").val());  
19:              var str = Math.sqrt(x);  
20:              $("#txtCalc").val(str);  
21:              result = str;  
22:              arrayComputation = "";  
23:              $("#labelArray").val("");  
24:            }  
25:          }  
26:          else { //length is two  
27:            if (text.indexOf("-") != -1) {  
28:              $("#txtCalc").val("Invalid Input");  
29:              return;  
30:            }  
31:            else {  
32:              var x = parseFloat($("#txtCalc").val());  
33:              var str = Math.sqrt(x);  
34:              $("#txtCalc").val(str);  
35:              result = str;  
36:              arrayComputation = "";  
37:              $("#labelArray").val("");  
38:            }  
39:          }  
40:          operatorPressed = "0";  
41:        });  
42:         /* NUMBER BUTTONS */  
43:        $("#btnZero").click(function () {  
44:          //conditions aron mu reset ang input  
45:          //if an operator is typed  
46:          if (operatorPressed == 1) {  
47:            $("#txtCalc").val("");  
48:            operatorPressed = 0;  
49:          }  
50:          var text = $("#txtCalc").val();  
51:          //if invalid input,do not execute codes below  
52:          if (text.search("Invalid") != -1) {  
53:            return;  
54:          }  
55:          if (text.length == 1) {  
56:            if (text != "0") {  
57:              var str = $("#txtCalc").val();  
58:              var newStr = str.concat($("#btnZero").attr("value"));  
59:              $("#txtCalc").val(newStr);  
60:            }  
61:          }  
62:          else { //length is two  
63:            var str = $("#txtCalc").val();  
64:            var newStr = str.concat($("#btnZero").attr("value"));  
65:            $("#txtCalc").val(newStr);  
66:          }  
67:        }); //end click button zero  
Make sure to register your jquery script in your asp.net content/master page.
 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">  
 <script type="text/javascript" src="Scripts/jquery-1.4.1.js" language="javascript">  
 </script>  

Saturday, May 14, 2011

Random Class not Generating proper X and Y Coordinates

I am creating a snippet to change x and y coordinates upon runtime. However,not as i expected,the generated random numbers does not meet my requirements.
Here is the C# snippet:
Code:
  switch (odd_eve)  
  {  
   case 0:    
      Random rand = new Random();             
      count = rand.Next(0, 300);  
      break;  
  case 1:  
      Random rand1 = new Random();   
      count = rand1.Next(310, 600);  
      break;  
  default:  
  }  
Based from the code above,the random generates a slanting x and y coordinates. The solution i come up came from the idea of a fellow developer to declare one Random object in one class.
Code:
Random rand = new Random(); //declared as global variable  
 //function snippet  
 switch (odd_eve)  
 {  
  case 0:           
     count = rand.Next(0, 300);  
     break;  
 case 1:  
     count = rand.Next(310, 600);  
     break;  
 default:  
 }  
Works like a charm!!!

Tuesday, May 3, 2011

Debug JavaScript Code in Visual Studio 2008/2010

Here are the simple steps to debug js code in your aspx markup.

1. Open Visual Studio 2008/2010
2. Click Tools then options
3. Expand debugging node then click checkboxes Manages,Native,Script.
4. In your web.config file,make sure to set compilation debug to true.
1:  <compilation debug="true">       
2:       <assemblies>  
3:        <add assembly="System.Core, Version=3.5.0.0, Culture=neutral,   
4:           PublicKeyToken=B77A5C561934E089"/>  
5:        <add assembly="System.Web.Extensions, Version=3.5.0.0,   
6:            Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>  
7:        <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0,   
8:           Culture=neutral, PublicKeyToken=B77A5C561934E089"/>  
9:        <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral,   
10:           PublicKeyToken=B77A5C561934E089"/>  
11:       </assemblies>  
12:      </compilation>  
5. Choose IE as default browser by right clicking on the .aspx webpage then choose IE as default browser.
6. Place a breakpoint in your js script, then run your code.
 <script type="text/javascript" language="javascript">  
     function myHello()   
     {  
       var x = 5;  
       var y = 6; //place breakpoint here or anywhere in your code  
       alert((x + y));    
     }  
   </script>