Unobtrusive JavaScript

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.

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

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

A Look at Sites Without JavaScript

• Mail.Google.Com

• WWW.Google.Com

• Msdn.Microsoft.com

• WWW.Yahoo.com

Revisit the jQuery Fast Food Site• Without JavaScript

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"/> }

Sidebar Navigation

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

Drop Down Menus

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

CSS

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

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");});