Entries tagged with javascript - Channel 9

Introducing the ASP.NET Ajax Library Beta

James Senior — Wed, 18 Nov 2009 20:56:00 GMT

During PDC 09 I grabbed some time with Stephen Walther to talk about some of the exciting new developments with the ASP.NET Ajax Library. There were a number of new things to talk about including:

The ASP.NET Ajax Library is now in Beta
Merging the Ajax Control Toolkit and the ASP.NET Ajax Library
There is now a pure client-side version of the Ajax Control Toolkit as well as the server-side version
Microsoft donating the ASP.NET Ajax Library into the CodePlex Foundation
There is now full product support of ASP.NET Ajax Library from Microsoft (including Ajax Control Toolkit

We then walked through some demos of the ASP.NET Ajax Library that brings the following exciting capabilities to developers:

Power

Build data-centric web apps using advanced client-side data access libraries and controls
Keep your markup clean and standards-compliant with imperative coding
Make it easier to code using JavaScript intellisense in Visual Studio
Keep loading and execution of your scripts simple with the Script Loader with advanced management and execution features

Performance

Use the ASP.NET Ajax Library CDN for lightning fast downloads of ASP.NET Ajax Library and jQuery
Reduce the number of requests to the server using script combining in the Script Loader
Reduce the size of your scripts using the ASP.NET Ajax Minifier Tool

Interoperability

Works across all browsers and any platform; ASP.NET, PHP, Ruby on Rails etc
Explore the code and make modifications, it’s open source
Use powerful jQuery selection syntax and Ajax Control Toolkit controls together
Create your own controls by extending ours like the DataView

Check out my full blog post about the news here: http://www.jamessenior.com/post/News-on-the-ASPNET-Ajax-Library.aspx

Check out the docs and samples on the wiki here: http://www.asp.net/ajaxlibrary
Download the code from http://ajax.codeplex.com

IE 9: First look at the new JS Engine

Charles — Wed, 18 Nov 2009 17:22:00 GMT

The IE team is busy working on the next version of the world's most popular browser. IE 8 is the most widely used browser on Windows. IE 9 is currently in the oven and the IE team is ready to talk about what they're working on. Here, JavaScript engine team members John Montgomery, Steve Lucco and Shanku Niyogi give us an early look at the new JS engine that will ship with IE 9. As of the interview, it is on par with the latest performance numbers of the latest Firefox beta and making progress in catching up to Chrome's latest V8. Again, this is a really early look at where the JS engine is and where it's going (and what they've done, architecturally, to speed up IE's JS engine). Enjoy!

Announcing Microsoft Ajax Library Preview 6

James Senior — Fri, 16 Oct 2009 10:47:00 GMT

I sat down with Stephen Walther from the Microsoft Ajax team to talk about their new release - Preview 6 - of the Microsoft Ajax Library.

Stephen walks us through the three big enhancements in this release:

- Addition of the imperative syntax
- The Script Loader
- jQuery support enhancements

We go on to talk about how this will be the last release before we launch the Microsoft Ajax Library before the upcoming Microsoft PDC conference in November and also mention the new Microsoft Ajax CDN where we now have hosted the Microsoft Ajax Library and jQuery.

To download the latest preview and get more information on the Microsoft Ajax Library head over to http://www.asp.net/ajax and also be sure to check out these related blog posts from the rest of the Microsoft Ajax team:

Scott Guthrie has the big announcement
James Senior has details on the Script Loader
Bertrand Le Roy has a blog post on imperative templates

Web Application Toolkits: Make your website "Social"

James Senior — Thu, 24 Sep 2009 18:02:00 GMT

Adding social capabilities to your Web site allows you to attract new users, keep them on your Web site for longer and get them to come back more often. In this screencast we explore this Web Application Toolkit that shows how, using a few lines of code with the Windows Live Messenger Web Toolkit, it is possible to add social capabilities to a Web site with instant messaging from a website to various client endpoints like Windows, Windows Mobile, Xbox 360 and Mac. Behind the scenes is a powerful set of UI Controls and a JavaScript library that connect your website to the Messenger Service which is used by 330 million users around the world.

Downloads and Links

Feedback

We love to hear your feedback, ideas and comments so drop us an email to webapp@microsoft.com. Keep up-to-date with the latest releases of Web App Toolkits by subscribing to the blog http://blogs.msdn.com/webapptoolkits or following us on Twitter here: http://www.twitter.com/microsoftweb

Gestalt - a JS library to write Ruby, Python and XAML in web pages

Adam Kinney — Tue, 21 Jul 2009 22:34:00 GMT

From the MIX Online team:

Gestalt is a library released by MIX Online Labs that allows you to write Ruby, Python & XAML code in your (X)HTML pages. It enables you to build richer and more powerful web applications by marrying the benefits of expressive languages, modern compilers, AJAX & RIAs with the write » save » refresh development model of the web.

Looking forward to playing with this new toy :)

Expert to Expert: Web Programming, JavaScript with Types and Flapjax

Charles — Tue, 23 Jun 2009 18:21:00 GMT

Flapjax is a new programming language designed around the demands of modern, client-based Web applications. Its principal features include:

Event-driven, reactive evaluation
An event-stream abstraction for communicating with web services
Interfaces to external web services

Flapjax is easy to learn: it is just a JavaScript framework. Furthermore, because Flapjax is built entirely atop JavaScript, it runs on traditional Web browsers without the need for plug-ins or other downloads. It integrates seamlessly with existing JavaScript code and other frameworks. [Source = http://www.flapjax-lang.org/]

Shriram Krishnamurthi is one of the authors of Flapjax and was in town recently giving a series of lectures to fellow programming language researchers in MSR. Shriram is a professor of computer science at Brown University. Expert to Expert host and programming language designer Erik Meijer is also doing some interesting things with event driven reactivity (you'll learn all about this soon...) so the two language guys just had to chat and we had to film it. Tune in to see what happened in Erik's office over the course of an hour or so. A fair amount of time is spent discussing the reasoning behind and benefits of adding types to a language like JavaScript. It's an interesting idea, but what does it mean for web developers (who, potentially, adopted JavaScript for its wide open and highly dynamic characteristics in the first place).

As usual, there's no editing here. It's as though you just came along and watched the magic unfold. Much thanks to Shriram for taking the time to chat with us. Flapjax is impressive. Do give it a try, Niners.

Ben Livshits and Emre Kiciman - AjaxView, Performance Profiling of AJAX web sites

Peli de Halleux — Mon, 22 Jun 2009 18:34:00 GMT

Ben Livshits and Emre Kiciman talk about the Ajax Profiling Extensions (also known as AjaxView), a tool that allows to profile web sites using Ajax. The tool lets you investigate the performance of the client side javascript! Ben and Emre explain how the profiling works, i.e. how they instrument the javascript on the fly, collect execution traces, and so forth. They also show a really cool demo of the tool where they turn on profiling for a couple web pages, then analyze the performance directly in Visual Studio.

Ajax Profiling Extensions @msdn: http://code.msdn.microsoft.com/AjaxView
AjaxView @MSR: http://research.microsoft.com/en-us/projects/ajaxview/

(We have a new jingle for the RiSE videos thanks the musical talent of Tom Ball. The full track of "San Juan Strut" can be found at www.themiddlethird.org)

The Research in Software Engineering team (RiSE) coordinates Microsoft's research in Software Engineering in Redmond, USA.

Extreme ASP.NET Makeover: jQuery - Applying ThemeRoller to ScrewTurn Wiki

Howard Dierking — Fri, 05 Jun 2009 23:06:00 GMT

Take a look at the final result, shown below, of switching the selected theme to UI Lightness and UI Darkness, which are the unmodified jQuery UI Themes added to ScrewTurn Wiki’s /Themes folder.

The layout could use a little tweaking here and there and I haven’t updated all the pages to use jQuery UI Themes, but the technique works. We can now use ThemeRoller to build custom ScrewTurn Wiki Themes. If you use Firefox, you can use the ThemeRoller Firefox Bookmarklet to design custom themes right on your own wiki! Once you’re satisfied with the results, just download your new custom theme and deploy it to your /Themes directory.

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - jQuery UI Themes in ScrewTurn Wiki

Howard Dierking — Fri, 05 Jun 2009 23:06:00 GMT

So I got to thinking. It is hard to create ScrewTurn Wiki Themes. It is dead easy to create jQuery UI Themes. Could jQuery UI Themes be adapted to theme ScrewTurn Wiki? I decided to find out and it turned out to be a lot easier than I ever expected.

jQuery UI Themes are designed to style widgets, which typically have header and content areas. ScrewTurn Wiki has a similar layout with headers and content areas for the navigation bar, main content area, and other sections. jQuery UI Themes don’t include overall site layout because they are intended for widgets, which fit into an existing site layout. I created a generic (predominantly) layout-based CSS file to be shared across themes called /Themes/Main.css.

The three most important jQuery UI CSS Framework-related CSS classes for theming ScrewTurn Wiki are ui-widget, ui-widget-header, and ui-widget-content. ui-widget is used for the widget container and defines the font used for widget elements. The other two classes obviously define header and content areas. Armed with this knowledge, I applied the ui-widget and ui-widget-content CSS classes to the body tags in the master pages to provide the font and background style. I then added the ui-widget-header CSS class to h1 through h6 tags in Core\Formatter.cs. Last stop was Default.aspx, where I made the following two changes:

<h1 class="pagetitle ui-widget-header">

and

<div id="PageContentDiv" class="ui-widget-content">

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - Re-Theming ScrewTurn Wiki

Howard Dierking — Fri, 05 Jun 2009 23:05:00 GMT

Re-Theming ScrewTurn Wiki

ScrewTurn Wiki ships with two themes – Default and Elegant, as shown above. The themes reside in the Theme folder and consist of a set of Cascading Style Sheets and images. As we saw in Part 3 , the CSS for a theme is quite long and involved. The two user-contributed themes available on the ScrewTurn Wiki site include the “Updated Default Theme,” which is a slight alteration of the Default Theme, and the “GreyBoxed Theme,” which is described as a cross between Elegant and Default. This does not speak well for the ease of custom theme creation for ScrewTurn Wiki.

jQuery UI includes the jQuery UI CSS Framework, which is used to create themes for widgets. It defines a set of standard CSS classes that themes can override to provide a custom look and feel. In addition to the 17 pre-built themes, jQuery UI also has the ThemeRoller, which allows you tocreate your own custom themes for jQuery UI widgets. You can take a quick tour of jQuery UI Themes and ThemeRoller.

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - jQuery UI In ScrewTurn Wiki

Howard Dierking — Fri, 05 Jun 2009 23:05:00 GMT

Integrating jQuery UI into ScrewTurn Wiki

You’ve probably already guessed that ScrewTurn Wiki has an ugly confirmation dialog somewhere. The place to find it is in Edit.aspx. Simply log in as the admin (the default username/password is admin/password) and click the “Edit this Page” link. Click on any link to navigate away from the Edit.aspx page and you’re presented with the box shown below.

This confirmation dialog is displayed by hooking the window’s onbeforeunload event and passing a warning message to display:

function __UnloadPage(e) { 
  if (!submitted) { 
    e.returnValue = " "; 
  } 
}

ScrewTurn Wiki passes a single space as the warning message, which is the empty line that appears between “Are you sure…” and “Press OK to continue…” in the confirmation dialog. The onbeforeunload event is not a standard HTML DOM event and has problematic support across browsers. ScrewTurn Wiki’s event hook mechanism only works on Internet Explorer and Firefox.

We’ll replace this unsightly confirmation dialog using jQuery UI’s Dialog widget. First, we can simply delete the onbeforeunload-related JavaScript from Edit.aspx and Edit.aspx.cs. Next, we’ll download a customized version of jQuery UI. (There is no option to download an uncustomized version because at a minimum, you need to select a theme.) From the jQuery UI download page, you can choose your desired components and a theme. We’ll use the UI Lightness theme, as it fits with the overall look and feel of ScrewTurn Wiki’s Default and Elegant themes.

The downloaded zip file contains quite a few files, but we’ll only need the contents of the js and css folders. (The development-bundle folder contains demos, documentation, un-minified CSS and JavaScript, and development tools. If you want to learn how jQuery UI works, this is a good place to look.) The js folder includes jquery-1.3.2.min.js and jquery-ui-1.7.1.custom.min.js and both files can be added to ScrewTurn Wiki’s JS folder. The css folder contains theUIi-lightness theme, which can be added to ScrewTurn Wiki’s Themes folder. If you want to use multiple jQuery UI themes on your Web site, only the contents of the css folder changes when switching themes. Jquery-ui-1.7.1.custom.min.js remains the same, so long as you don’t change the selected components.

To use jQuery UI, we need to add references to the jQuery and jQuery UI JavaScript files as well as the jQuery UI theme style sheet. ScrewTurn Wiki automatically includes all JavaScript files in the JS directory. So we need only add the link to the CSS file in MasterPageSA.master, Edit.aspx’s master page:

<link rel="stylesheet" type="text/css" 
  href="Themes/ui-lightness/jquery-ui-1.7.1.custom.css" />

In Edit.aspx, we will call the enablePendingChangesWarning JavaScript function, which we will define in ScrewTurnWiki.js. By placing the function in ScrewTurnWiki.js, we can make this functionality reusable across the application. The dialog itself is defined by a simple div tag:

<div id='confirmDialog' title='Confirm'> 
  <p> 
    <span class='ui-icon ui-icon-alert' 
      style='float:left; margin: 0 7px 20px 0;'></span> 
    Are you sure you want to abandon your changes? 
  </p> 
</div>

The elements of the dialog should be immediately obvious, except for the span tag. The span with CSS classes is the way that jQuery UI defines themable icons. So, “ui-icon” specifies that this span is an icon and “ui-icon-alert” selects a particular icon.

Now we could insist that any page that wants to display a pending changes warning has to include this <div id=’confirmDialog’/> on the page. This would error prone and jQuery provides a better way. The first step in enablePendingChangesWarning is to use jQuery to manipulate the HTML DOM and append the confirmDialog div to the body:

$('body').append("<div id='confirmDialog' title='Confirm'><p><span class='ui-icon ui-icon-alert' style='float:left; margin:0 7px 20px 0;'></span>Are you sure you want to abandon your changes?</p></div>");

Once the added, we need to call the jQuery UI dialog function to change our ordinary div into a jQuery UI Dialog widget, as shown below.

$('#confirmDialog').dialog({ 
  autoOpen: false, 
  modal: true, 
  overlay: { backgroundColor: '#000', 
    opacity: 0.5 }, 
  buttons: { 
    Ok: function() { 
      var href = $(this).dialog('option', 'href'); 
      window.location.href = href; 
    }, 
    Cancel: function() { 
      $(this).dialog('close'); 
    } 
  } 
});

We’re creating an initially hidden “autoOpen: false” modal dialog. Notice the button definitions. Cancel simply closes the dialog. We’ll come back and talk about the OK button in just a second.

The dialog has to be displayed in response to the user navigating away from the page unintentionally. This is going to happen when a link is clicked. We could manually hook up the onclick events on the page, but this would again be error prone. jQuery once again provides us with a better way:

$('a').click(function(event) { 
  event.preventDefault(); 
  $('#confirmDialog').dialog( 
    'option', 
    'href', 
    this.href).dialog('open'); 
});

We use jQuery to select all anchors (<a/>) on the page and register a click event handler for them. When the href is clicked, the confirmDialog is displayed. Event.preventDefault prevents the default action of following the link from occurring. Otherwise, the link would be followed as soon as the confirmDialog is displayed. We then pass the href of the anchor link to the confirmDialog as an option. Now you can figure out what the OK button does. If OK is pressed, this href is retrieved from the dialog’s options and used to set the window.location.href, which causes the browser to navigate to the destination page. This gives us a confirmation dialog that fits into the site’s theme, as we see below.

Notice the greyed out page effect behind the dialog, which was achieved using the opacity overlay. We only have one minor problem to deal with. The edit page has a few anchor tags that don’t navigate away from the page, but instead refresh the page attachments list or show a list of content templates. We don’t want to display the Confirm Dialog for these links, which look like <a href=’javascript:__doPostBack(‘mangledControlName’,’’). Rather than simply selecting all anchor tags, we can use an advanced jQuery selector to filter out the undesired elements:

$('a:not(a[href^=javascript])').click(
  function(event) { 
    event.preventDefault(); 
    $('#confirmDialog').dialog('option', 'href', 
      this.href).dialog('open'); 
});

Note that a[href^=javascript] selects all anchor tags whose href attribute starts with “javascript”. Also, $= matches attributes ending with a particular string. (The use of ^ and $ come from regular expressions where ^ denotes the start of the line and $ the end.) The :not filter removes the href=javascript anchors from the collection of all anchors, which were selected with the first “a.” You can find a list of all selectors in the jQuery Selector documentation.

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - Improving User Interaction

Howard Dierking — Fri, 05 Jun 2009 23:05:00 GMT

Improving User Interaction

Imagine the following scenario: With the assistance of the CSS Refactoring Helper, we have created an aesthetically pleasing XHTML/CSS-based site. We have spent days—nay, weeks—toiling away to get the site layout and images just right. We’re working on an edit page and we want to warn the user if they try to navigate away without saving their changes. So we display a confirm dialog, using the JavaScript confirm(message) function and we’re presented with the dialog box shown below.

How unsightly! Unfortunately, there is no way to style the appearance of the JavaScript confirm dialog. (A JavaScript alert and prompt dialogs are equally impossible to style and just as ugly.) Another option is to use a popup window, but you have little to no control over the window chrome (or titlebar/border.) On the plus side, you can style the contents of the popup window using XHTML/CSS. On the downside, many users have a popup blocker enabled, which limits their utility.

So, how can we display a confirmation dialog that is aesthetically pleasing and integrates with the overall look and feel of our site? One way is to use the Dialog widget from jQuery UI. jQuery UI is a collection of user interface components built on top of jQuery. jQuery UI is available in a variety of themes and consists of a CSS file, a JavaScript file, and a set of images. It includes a variety of interactions (e.g., draggable, resizable), widgets (e.g., dialog, tabs, datepicker), and effects(e.g., bounce, highlight, shake).

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: Script - jQuery SoC

Howard Dierking — Fri, 05 Jun 2009 07:01:00 GMT

Separating Your Concerns with jQuery

In your typical Web page, JavaScript is often found liberally sprinkled throughout the HTML. Little snippets of inline code in event handlers to catch clicks, mouse-overs, key presses and more. For example, ScrewTurn Wiki’s admin tools menu is toggled by clicking on the Admin link, which executes a call to the __ToggleAdminToolsMenu() function. (To see the Admin link, log in using the username/password of admin/password.)

<a id="AdminToolsLink" title="Administration Tools" 
href="#" 
onclick="javascript:return __ToggleAdminToolsMenu();">
Admin</a>

Rather than having the onclick event wired up in the HTML, we could use the following markup instead:

<a id="AdminToolsLink" title="Administration Tools" href="#">Admin</a>

And then apply the behavior in a script tag in the <head/> or preferably in a separate JavaScript file:

$(document).ready(function() { 
    $('#AdminToolsLink').click(function() { 
        return __ToggleAdminToolsMenu(); 
    }); 
});

jQuery encourages the separation of behavioral code from HTML markup.

It doesn’t stop at moving function calls around. We can use jQuery to further refactor and simplify ScrewTurn Wiki’s JavaScript. Code related to showing/hiding page elements such as Admin Tools and Page Attachments is around 100 lines long, including comments and white space, but not including hooking up onclick, onhover and other events. That might not seem like a lot of code, but we can achieve the same effect for the Admin Tools with the following jQuery:

$(document).ready(function() { 
    $('#AdminToolsLink').click(function() { 
        $('#AdminToolsDiv').css({ 'z-index': '1', 
            'position': 'absolute', 
            'top': link.position().top + link.outerHeight() + 'px', 
            'left': (link.position().left - 
              (div.outerWidth() - link.outerWidth())) + "px" 
        }); 
        $('#AdminToolsDiv').toggle(); 
    }).click(); 
});

When AdminToolsLink is clicked, we use the built-in jQuery css() function to reposition the AdminToolsDiv correctly beneath the AdminToolsLink and then use the built-in toggle() function to toggle AdminToolsDiv between visible and hidden. Notice the parameterless click() function on the end. In jQuery, click(function() {}) hooks up an event handler while click() calls it. So we are setting up an event handler and immediately invoking it to toggle the menu to initially hidden. We can use the same technique for the Page Attachments, but we can take this a step further, as shown below.

$(document).ready(function() { 
    $('.dropdownMenu').click(function() { 
        var link = $(this); 
        var div = link.next('div'); 
        div.css({ 'z-index': '1', 
            'position': 'absolute', 
            'top': link.position().top + link.outerHeight() + 'px', 
            'left': (link.position().left - 
              (div.outerWidth() - link.outerWidth())) + "px" 
        }); 
        div.toggle(); 
    }).click(); 
});

We apply a CSS class of “dropdownMenu” to any page element that we want to use as a drop-down menu. The code above hooks the click event. When clicked, jQuery finds the next <div/> after the clicked element and toggles that <div/> between visible and hidden. We have moved from a procedural style of specifying how page elements are individually shown and hidden to a declarative style whereby applying a CSS class of “dropdownMenu” to an element makes its children toggle automatically. If we decide that we don’t like the toggle() effect, jQuery provides a variety of other visual effects, including fades, slides and custom animations.

You can do a lot more with jQuery, including alternating row styles on tables, mouse-over effects, background loading and display of AJAX data, and more. An advanced UI library has been built on top of jQuery, which is aptly named jQueryUI. It builds on jQuery’s core events and animations to provide rich client-side widgets, such as date pickers, custom dialogs, progress bars, sliders and tabs, as well as rich interactions such as making page elements
draggable, resizable and sortable!

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

Extreme ASP.NET Makeover: Script - jQuery IntelliSense

Howard Dierking — Fri, 05 Jun 2009 07:01:00 GMT

ASIDE: jQuery IntelliSense

jQuery IntelliSense can be enabled in Visual Studio 2008 SP1 with a supported hotfix from Microsoft as detailed by Scott Guthrie’s blog . Watch the following video for tips, tricks, and gotchas when enabling jQuery IntelliSense in your projects.

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

Extreme ASP.NET Makeover: Script - Refactoring ScrewTurn Wiki JavaScript

Howard Dierking — Fri, 05 Jun 2009 07:01:00 GMT

Refactoring ScrewTurn Wiki’s JavaScript

The first step in refactoring ScrewTurn Wiki’s JavaScript is to extract it into separate JavaScript files. Not only will this allow us to test the JavaScript, but it also will improve page performance. This is due to decreased page size, as the browser can cache the JavaScript files rather than downloading them with every dynamic page. This is mostly a simple operation of moving the JavaScript from MasterPage.master and Default.aspx to ~/JS/ScrewTurnWiki.js, and including a reference to ScrewTurnWiki.js in MasterPage.master. (Moving the JavaScript from other pages to ScrewTurnWiki.js is left as an exercise for the reader.) ScrewTurn Wiki’s MasterPage.master calls Tools.GetIncludes() to automatically generate <script type=”text/javascript”/> tags for all JavaScript files in ~/JS/ and ~/Themes/<NAME>/, so we do not have to manually add ScrewTurnWiki.js.

After moving the scripts to ~/JS/ScrewTurnWiki.js, ScrewTurn Wiki’s main page looks like this:

Notice the “Name Size” box that appears at the bottom of the page beneath the Warning? This is the PageAttachmentsDiv that is supposed to be hidden. Here is the code to hide that:

var __elem = document.getElementById("PageAttachmentsDiv"); 
if (document.getElementById("PageAttachmentsLink")) { 
    __RepositionDiv(document.getElementById("PageAttachmentsLink"), __elem); 
} 
__elem.style[:display"] = "none";

Before moving the code, the above JavaScript was placed after the <div id=”PageAttachementsDiv”/> . When the code executed, the <div/> existed and was hidden properly. When the code is moved into ScrewTurnWiki.js, it is executed before the <div/> is created and nothing happens. The <div/> is later created and remains visible. The solution is to simply move the above loose JavaScript into a doWindowLoad() function and execute that function when the window finishes loading:

window.onload = doWindowLoad; 



function doWindowLoad() { 
    var __elem = document.getElementById("PageAttachmentsDiv"); 
    if (document.getElementById("PageAttachmentsLink")) { 
        __RepositionDiv(document.getElementById("PageAttachmentsLink"), __elem); 
    } 
    __elem.style["display"] = "none"; 
    







    // Additional code that needs to executed when the HTML DOM 
    // is loaded and ready for manipulation 
}

ScrewTurn Wiki now looks and behaves the way it did before the JavaScript was relocated, as we see below.

Now that the JavaScript has been relocated into a separate file, we can use QUnit to test whether PageAttachmentsDiv is hidden when the page loads. In QUnitTests.html – our HTML page test harness – we create a dummy <div/> with the same ID:

<div id="PageAttachmentsDiv" style="width:100px;height:100px;"></div>

Then in our test, we explicitly call the doWindowLoad() function and verify that PageAttachmentsDiv is hidden:

test('PageAttachmentsDiv should be initially hidden', function() { 
    doWindowLoad(); 
    var display = document.getElementById('PageAttachmentsDiv').style['display']; 
    equals(display, 'none'); 
});

Using dummy page elements in the test harness is easier than trying to test the actual page elements on the live page. To avoid polluting the test harness output with dummy elements, the containing <div/> can be marked as hidden (display:none;) or absolutely positioned outside of the visible content (position:absolute;left:-1000px;top:-1000px;). The choice of technique depends on what you are trying to test, as hiding the <div/> sometimes interferes with layout-related tests.

Getting Jiggy with jQuery

With our QUnit test harness in place, we are ready to refactor ScrewTurn Wiki’s JavaScript using jQuery. Let’s start by taking a look at hiding the PageAttachmentsDiv:

var element = document.getElementById("PageAttachmentsDiv"); 
element.style["display"] = "none";

The following jQuery code implements the same functionality:

$('#PageAttachmentsDiv').hide(); // $() is an alias for jquery()

(Note that you need to include a reference to the jQuery library in your page using a <script/> tag.) The jQuery version is terser, using the CSS-style “#” to indicate ID-based selection, and the more declarative “hide()” method. It might seem like a small savings until you realize the power disguised behind the apparent simplicity. What if we want to hide all menus on the page with the CSS class of “menu”?

$('.menu').hide();

There is no need to walk the HTML DOM or iterate for-loops. jQuery handles all of this transparently for you.

jQuery uses CSS-like selectors to operate on collections of HTML DOM elements. So we can play even more powerful tricks, such as hiding all menus, but only if their direct parent is a <div/> with CSS class “toplevel”:

$('div.toplevel > .menu').hide();

jQuery is not only encouraging us to write less code, but also a more functional style of code. To make this clearer, consider hiding all menus using procedural-style code:

Start with the document element.
For each child element
- If it is a menu, change its style to display: none.
- Else, iterate through its children from Step 2.

A functional style says:

Hide all menus.

Functional-style code says what to do rather than how to do it. This is a subtle distinction, but an important one.

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

Extreme ASP.NET Makeover: Script - Testing JavaScript

Howard Dierking — Fri, 05 Jun 2009 07:00:00 GMT

Lingua Franca of the Programmable Web

JavaScript is the lingua franca of Web programming languages. It doesn’t matter whether you’re programming in .NET, Ruby, Python, PHP or a myriad of other server-side languages, the programming language of the browser is JavaScript. The official standard is more properly called ECMAScript and is specified in ECMA-262. JavaScript, JScript, ActionScript and others are all dialects of ECMAScript, but written by different vendors. Current browsers implement ECMA-262 Edition 3, which has been a standard since 1999. (Work is ongoing on ECMA-262 Edition 5. Edition 4 was abandoned due to irreconcilable differences within the standards committee.) The JavaScript dialect is managed by the Mozilla Foundation and is implemented by Firefox, Google Chrome, Safari and other browsers. JScript is Microsoft’s dialect and is implemented in Internet Explorer. The dialects are compliant with ECMA-262, but offer vendor-specific extensions. Throughout this article, I will use the common practice of referring to the language as JavaScript, though more properly, it should be called ECMAScript.

JavaScript Heritage

JavaScript has a reputation as a toy language. Many developers have the mistaken impression that JavaScript is a dumbed-down version of Java without strong typing. The reality couldn’t be further from the truth. When designing a new language for the Netscape browser, Brendan Eich, JavaScript’s creator, took inspiration from Self (a prototype-based object-oriented language) and Scheme (a functional language). The new language was named Mocha and later renamed LiveScript. With the surge in interest in Java in the late '90s, Mocha/LiveScript was rebranded JavaScript and modified to look more like Java, with curly braces and semicolons. In reality, JavaScript is more closely tied to its functional roots, where functions are treated as first-class citizens of the language. Although many developers still use JavaScript in a very procedural fashion, it is in fact a very powerful functional language that is running inside millions of Web browsers worldwide.

JavaScript Renaissance

A renewed interest in JavaScript has been sparked by recent JavaScript frameworks, such as jQuery, Prototype, YUI, Dojo and MooTools. jQuery has received a lot of attention recently, due in part to its power, simplicity, and ease of extensibility. It was first released by John Resig in 2006, and has since gathered an active community of contributors, plug-in authors and users. According to the jQuery Web site:

“jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.”

jQuery received an additional boost on Sept. 28, 2008, when Scott Guthrie, corporate vice president of the Microsoft Developer Division, announced that Microsoft had partnered with the jQuery development team and would be shipping jQuery with Visual Studio going forward. This was a historic moment because jQuery is released under the MIT open source license. Not only is Microsoft shipping an open source library with Visual Studio, it has committed to shipping the library unmodified and to contributing patches in the same way as any other developer or team.

The latest release, as of this writing, is jQuery 1.3.2, and it supports the major browsers in use today, including Internet Explorer 6.0+, Firefox 2.0+, Safari 3.0+, Opera 9.0+ and Chrome. Web development and JavaScript have garnered a bad reputation in development circles, in large part due to browser-specific inconsistencies, bugs and quirks. To achieve cross-browser support, jQuery provides a consistent API for manipulating the HTML DOM, attaching events, animating elements and AJAX interactions, by internally handling differences between browsers.

Testing JavaScript

Before diving headlong into replacing ScrewTurn Wiki’s classic-style JavaScript with jQuery-style JavaScript, we have to remember the purpose of refactoring – to change the internal implementation of code without changing its behavior. We could change the code and manually verify that the changes did not break anything, but we should be applying the same care with our JavaScript as we do with our server-side code. If this were C#, I would write a test to verify the current behavior, refactor the code and re-run the test to ensure that everything continued to behave as before. Why should I take any less care with client-side JavaScript? The question though is, how do I test JavaScript? The answer comes from jQuery itself.

When developing jQuery, the jQuery team had much the same challenge – to verify that jQuery continued to work as expected, as optimizations and fixes were applied. Its solution was to create a lightweight JavaScript test framework called QUnit. There is nothing jQuery-specific in QUnit, and you can use it to test any JavaScript code. A simple QUnit test might look like this:

test('Concatenated hello should compare equal to hello', function() { 
    var actual = 'h' + 'e' + 'l' + 'l' + 'o'; 
    var expected = 'hello'; equals(actual, expected); 
});

This test is embedded in a Web page test harness, and the results can be viewed in a browser, as shown in below.

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

10-4 Episode 21: Web Tooling Improvements

Drew Robbins — Fri, 29 May 2009 17:20:00 GMT

In this episode of 10-4, Drew Robbins covers some of the new web tooling features in Visual Studio 2010. There is new Code Snippet support for both HTML and JavaScript. In addition, Visual Studio now has a new dynamic JavaScript IntelliSense engine that infers the return type from functions and provides appropriate intellisense. This makes working with JavaScript libraries a lot easier.

More detail about the web deployment features is covered in Episode 10: Making Web Deployment Easier.

Be sure to check out all of the 10-4 episodes where we cover many of the features in Visual Studio 2010 Beta 1 and .NET Framework 4 Beta 1.

Expert to Expert - Erik Meijer and Lars Bak: Inside V8 - A Javascript Virtual Machine

Charles — Wed, 29 Apr 2009 16:29:00 GMT

Lars Bak is a virtual machine master. He and team have created a Javascript VM, V8, that takes Javascript syntax and produces optimized machine code directly. The result is very performant execution of Javascript. How does V8 work, exactly? What are the basic design decisions that have gone into it's construction? Why is it designed the way it is? How fast can Javascript really run, anyway? How challenging is it to take a language like Javascript and produce highly optimized machine code?

Erik Meijer, language designer and fundamentalist functional high priest, discusses these questions and more with Lars. We also talk about the language to machine code translation versus having an intermediate step (like IL) that gets optimized further in runtime context by a JITer.

If you want to know the thinking behind the thinking of Javascript compilation, the current state of the art and future directions, then this is for you. Big thanks to Lars Bak for spending time with Channel 9!

Enjoy!

Glimmer: a jQuery Interactive Design Tool

Charles — Wed, 29 Apr 2009 02:45:00 GMT

The MIX Online team has released a new prototype tool from their lab called Glimmer, which should prove very helpful for web developers/designers wanting to easily incorporate jQuery in their web applications thanks to a simple and powerful UI-based composer.

"Glimmer is a WPF-based Windows application that allows you to easily create interactive elements on your web pages by harnessing the power of the jQuery library. Without having to hand-craft your JavaScript code, you can use Glimmer’s wizards to generate jQuery scripts for common interactive scenarios. Glimmer also has an advanced mode, providing a design surface for creating jQuery effects based on your existing HTML and CSS."

Northeast Roadshow - Exploring Internet Explorer 8

Brian Johnson — Tue, 28 Apr 2009 15:16:00 GMT

There are plenty of new things to talk about with Internet Explorer 8, and no time like the present since it’s officially released! In this screencast, we begin with a tour of the new consumer features from the relatively minor of tab groups and improved zooming through the major with tab process isolation, Accelerators, and WebSlices. Then, a brief but important look at standards and compatibility options every web developer should understand. Finally, there’s a look at new developer features including an in-depth look at the developer tools included with IE8 to help work with HTML, CSS, and JavaScript.

Slides from the session are available on the Northeast Roadshow Code Gallery.

Librería ASP.NET AJAX cliente y código Javascript

Daniel Garzon — Thu, 22 Jan 2009 09:59:00 GMT

Jose Manuel Alarcón Aguín, director general y director tecnico de Krasis, hace un repaso a las mejoras incorporadas en Visual Studio 2008 para el desarrollo con Javascript.

Tanto desde el punto de vista de mejoras en el entorno de desarrollo como a nivel de la librería ASP.NET AJAX del lado del cliente.

Mejorar el rendimiento de la descarga de librerías Javascript

Daniel Garzon — Tue, 30 Dec 2008 13:28:00 GMT

Jose Manuel Alarcón Aguín, director general y director tecnico de Krasis, nos muestra como evitar que el navegador tenga que descargar multitud de archivos de script desde el servidor, se sustituirán éstas por una descarga combinada, más eficiente y rápida.

Esta característica ha sido introducida en el Service Pack 1 de ASP.NET 3.5. Por lo tanto aplica a .NET 3.5 y Visual Studio 2008.

Scott Isaacs: Introducing Web Sandbox

Charles — Fri, 31 Oct 2008 17:19:00 GMT

Web Sandbox is a project from Live Labs, a group focused on Internet technologies. Dragos Manolescu (who worked on Live Labs and Political Streams) and Scott Isaacs (who worked on Windows Live Gadgets and is credited with the creation of DHTML) made the initial project pitch. Since then the Web Sandbox team leveraged the expertise of and talent from other groups interested in securing the web, such as Windows Live, MSN and DP Languages.

You have to check this out:
http://websandbox.livelabs.com/

Please try and break the isolation model by injecting clever scripts on the websandbox website. If you find gaping holes, share it right in the forums on the site (they are fundamentally transparent).

Enjoy!

Erik Meijer, Dave Thomas and Pratap Lakshman: Perspectives on JavaScript and Language Design

Charles — Tue, 07 Oct 2008 10:51:00 GMT

JavaScript is a language that appears to have a long lifespan given its ubiquity on the web. It pretty much powers the client-side in-page execution of hundreds of millions of web pages. As a language, well, it's cool and strange at the same time. It's not evolved much over the years and is the topic of hot debate in the halls of the web standards committee. At any rate, a few people who know a thing or two about dynamic languages joined me in a conversation to address JavaScript and dynamic languages for the web, generally. The great Dave Thomas and fundamentalist functional languages high priest Erik Meijer sit down with Microsoft JScript Program Manager Pratap Lakshman and myself to converse on JavaScript the language and virtual machine. Of course, as you can imagine, the conversation winds effortlesssly into various geeky tangents.

This is the second year I've been lucky enough to take part in the cross-platform software engineering conference JAOO. Like last year, I was very fortunate to get to sit down with a few key players in the programming languages design field and watch several technical presentations that span the industry and problems we face as software developers. One of the truly great things about JAOO is that it is not a product-focused conference: it's about programming first and foremost and enables the sharing of perspectives and ideas among the world's best and brightest programming minds. As you can imagine, I, like many technical types here at Microsoft, am a huge fan of JAOO. Thank you Trifork!!!

Enjoy!

What's New for JScript in IE8?

Janakiram MSV — Tue, 09 Sep 2008 02:12:00 GMT

The web developer community is curious to know what’s new for JScript in IE8. In this show, the JScript Evangelist, Janakiram MSV interviews the program managers who own the key JScript features.

The JScript team is based out of IDC in Hyderabad. We own the scripting engine for IE8 & Silverlight and provide authoring and tooling experience through Visual Studio and IE8. We also engage with the ECMA standards body to drive the JScript standardization process.

This is show is to breifly share the work that we do here. You will hear us talk about the new and improved JScript engine and the Developer Tools that are part of IE8.

You can find our team blog at http://blogs.msdn.com/jscript! Feel free to drop a comment with your feedback!

Happy Scripting!

Entries tagged with javascript - Channel 9

Introducing the ASP.NET Ajax Library Beta

IE 9: First look at the new JS Engine

Announcing Microsoft Ajax Library Preview 6

Web Application Toolkits: Make your website "Social"

Gestalt - a JS library to write Ruby, Python and XAML in web pages

Expert to Expert: Web Programming, JavaScript with Types and Flapjax

Ben Livshits and Emre Kiciman - AjaxView, Performance Profiling of AJAX web sites

Extreme ASP.NET Makeover: jQuery - Applying ThemeRoller to ScrewTurn Wiki

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - jQuery UI Themes in ScrewTurn Wiki

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - Re-Theming ScrewTurn Wiki

Re-Theming ScrewTurn Wiki

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - jQuery UI In ScrewTurn Wiki

Integrating jQuery UI into ScrewTurn Wiki

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: jQuery - Improving User Interaction

Improving User Interaction

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd898316.aspx

Extreme ASP.NET Makeover: Script - jQuery SoC

Separating Your Concerns with jQuery

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

Extreme ASP.NET Makeover: Script - jQuery IntelliSense

ASIDE: jQuery IntelliSense

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

Extreme ASP.NET Makeover: Script - Refactoring ScrewTurn Wiki JavaScript

Refactoring ScrewTurn Wiki’s JavaScript

Getting Jiggy with jQuery

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

Extreme ASP.NET Makeover: Script - Testing JavaScript

Lingua Franca of the Programmable Web

JavaScript Heritage

JavaScript Renaissance

Testing JavaScript

Other videos from this article

Read the full article at http://msdn.microsoft.com/en-us/magazine/dd896902.aspx

10-4 Episode 21: Web Tooling Improvements

Expert to Expert - Erik Meijer and Lars Bak: Inside V8 - A Javascript Virtual Machine

Glimmer: a jQuery Interactive Design Tool

Northeast Roadshow - Exploring Internet Explorer 8

Librería ASP.NET AJAX cliente y código Javascript

Mejorar el rendimiento de la descarga de librerías Javascript

Scott Isaacs: Introducing Web Sandbox

Erik Meijer, Dave Thomas and Pratap Lakshman: Perspectives on JavaScript and Language Design

What's New for JScript in IE8?