jump to navigation

Javascript Intellisense and debugging in Visual Studio 2008 June 25, 2008

Posted by fofo in C#, Javascript, Visual Studio 2008.
Tags: , ,
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

 

Add to FacebookAdd to NewsvineAdd to DiggAdd to Del.icio.usAdd to StumbleuponAdd to RedditAdd to BlinklistAdd to Ma.gnoliaAdd to TechnoratiAdd to Furl

Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: