Javascript Intellisense and debugging in Visual Studio 2008 June 25, 2008
Posted by fofo in C#, Javascript, Visual Studio 2008.Tags: Intellisense, Javascript, Visual Studio 2008
trackback
Visual studio 2008 is available for some time now. People are hesitant to upgrade to VS 2008 from previous versions of Visual studio. Even though the new features and enhancements of Visual Studio 2008 are well documented elsewhere in the web, I will try to highlight the benefits of using VS 2008. In this post I will talk about Javascript Intellisense and debugging for which are brand new features in VS 2008.
I will try to explain what I am doing with a step-by step example.
1) Launch Visual Studio 2008
2) Create a new asp.net (c#) web application
3) Just below the title section-tag of the .aspx page create this simple javascript script
<head runat=”server”>
<title>Untitled Page</title>
<script type=”text/javascript”>
function displayname(){
return “fofo”;
}
</script>
</head>
4) The moment you hit “F” from the keyboard (to write the word function you have Intellisense). See the picture below
5) We can add a new javascript function that adds two numbers. You can add the following function below the previous one. You can get Intellisense in the function’s body. See the picture below
function addNumbers(a,b)
{
var c = a+b;
return c;
}
6) You can call these javascript scripts with 2 links. see the code below. just place two <a> tags inside the form body.
<form id=”form1″ runat=”server”>
<a href=”javascript:displayname()”> display</a>
<a href=”javascript:addNumbers(5,6)”> Add</a>
7) If you run your application (F5) and click on the Add link you get a page like mine. See the picture below
8) Let’s see now how Intellisense can work with external javascript files. Add a new item to your web application, a Jscript file. You can call it somefunctions.js.
9) In the somefunctions.js file copy and paste the following code
function reversestring(mystring)
{var newString = “”;
var theString =mystring;
var counter = theString.length;
for (counter ;counter > 0 ;counter — ) {
newString += theString.substring(counter-1, counter);}
document.write(theString + ” reversed is ” + “<b>” + newString + “</b>” + ” ! “);
}
It is just a simple function that reverses the word any given word. We need to call it from our .aspx page
10) Go back to the .aspx page and in the javascript area create a new function to call the reverstring function
function externalscript(){
var str= reversestring(‘nikos’);
return str;
}
11) if you try to type this line of code var str= rev… there will be no Intellisense. You need to reference the external javascript file. You can do that by adding the following code just under the <title> tag
<script src=”morefunctions.js” type=”text/javascript”></script>
If you do that and try to reference the external javascript function from the .aspx page you will get Intellisense as the picture below shows.
12) Moreover you can add XML comments in the external javascript file like these below
reversestring(mystring) {
///<summary> Reverse any given string </summary>
///<param name=”mystring” type=”string”>A word to be reversed</param>
///<returns type=”String”></returns>
These notations can be picked up by Intellisense in our .aspx page as the picture below shows
Finally you can place breakpoints in the javascript scripts in the .aspx file and the external .js file
See the picture below
If you want to download the source code for this post please email me at nkantzelis@q-training.gr
DOT NET RULES 
Comments»
No comments yet — be the first.