The document discusses the principles of unobtrusive JavaScript, emphasizing the separation of HTML, CSS, and JavaScript for better maintainability. It highlights usability by ensuring sites function without JavaScript and promotes graceful degradation and progressive enhancement for user experience. Additionally, it provides examples and code snippets for implementing these principles effectively.

1. Unobtrusive JavaScript

2. Separation of Concerns
• HTML is for Content only
• All Style Information in CSS files
• All JavaScript in JS files
• Markup describes a document's structure, not its behavior
combining the two negatively impacts a site's maintainability.

3. Principles of Unobtrusive JavaScript
• Usability
• Your Site Should Work without JavaScript enabled
• When JavaScript is Disabled Usability Suffers
• Graceful Degradation
• All Content and Functionality Should be Accessible without JavaScript
• Progressive Enhancement
• when JavaScript is enabled user gets a better experience

4. Principles of Unobtrusive JavaScript
• Usability
• Users will generally accept having to enable JavaScript for a better
user experience
• Graceful Degradation
• No longer relevant, Almost all users are on a browser that supports
modern javascript (with shims)
• Separation of Concerns
• Separation of Concerns Does Lower Maintenance Costs

5. A Look at Sites Without JavaScript
• Mail.Google.Com
• WWW.Google.Com
• Msdn.Microsoft.com
• WWW.Yahoo.com

6. Revisit the jQuery Fast Food Site
• Without JavaScript

7. Determining if JavaScript is Enabled from
the Server Side
@if (Request.Cookies["NoJS1"] == null)
{
<noscript>
<meta http-equiv="set-cookie" content="NoJS1=;">
<meta http-equiv="refresh" content="0;"/>
</noscript>
}
else
{
<meta http-equiv="NOJS"/>
}

8. Sidebar Navigation
@if (Request.Cookies["NoJS1"] != null)
{
Html.RenderAction("GetSideBar", "FastFood" );
}

9. Drop Down Menus
@{
var extraClass = string.Empty;
if (Request.Cookies["NoJS1"] != null)
{
extraClass = "noJS";
}
}

10. CSS
.noJS .dropdown-menu {
display: table;
position: relative;
}

11. Clear the Cookie
var delete_cookie = function (name) {
document.cookie = name + '=;expires=Thu, 01 Jan 1970
00:00:01 GMT;';
};
$(document).ready(function () {
delete_cookie("NoJS1");
});