Embrace JavaScript Frameworks

When developing web applications, its very common for a confusing blend of JavaScript and framework code to make its way into the code..

Object Partners

When developing web applications, it’s very common for a confusing blend of JavaScript and framework code to make its way into the code. This can result in difficulty maintaining or debugging the application, especially when the application is more sophisticated or the scripts aren’t contained in-line.

Consider this simple HTML page, that displays a link which will insert the time into an initially empty div.

<html>
<head>
<meta http-equiv=_"Content-Type"_ content=_"text/html; charset=UTF8"_>
<title>Example</title>
<script type=_"text/javascript"_ src=_"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"_></script>
<script type=_"text/javascript"_> **function** setTime(){ $("#time").html(**new** Date().toLocaleTimeString());
}
</script>
</head>
<body>  
<div>  
 <a href=_"javascript:setTime();"_>Click</a>  
</div>  
<div id=_"time"_></div>
</body>
</html>

The anchor tag uses a javascript: notation to do its work, while the called function uses a JavaScript framework (in this case jQuery) to do its work. This may have been the result of an iterative development effort, perhaps where the framework was added after the page already worked, with the jQuery selector replacing other JavaScript syntax.

Consider these few little changes to the same HTML.

<html>
<head>
<meta http-equiv=_"Content-Type"_ content=_"text/html; charset=UTF8"_>
<title>Example</title>
<script type=_"text/javascript"_ src=_"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"_></script>
<script type=_"text/javascript"_> **function** setTime(){ $("#time").html(**new** Date().toLocaleTimeString());
}
$(**function**() { $("#clickToSetTime").click(**function**(event){ event.preventDefault();
  setTime();
 });
}); </script>
</head>
<body>  
<div>  
 <a href=_"setTime"_ id=_"clickToSetTime"_>Click</a>  
</div>  
<div id=_"time"_></div>
</body>
</html>

Here we’ve removed the javascript: notation from the anchor tag, and given it an identifier. We also added a little bit of jQuery to bind a click event to the anchor. When the anchor is clicked, the jQuery event will fire, and the same function is called. We may have wanted to move the function’s work into our new method, but that nuance isn’t important here; it could be that the function is used elsewhere, and we wouldn’t want to break that. Also, the jQuery function inhibits the anchor from performing its action, so we won’t result in changing our page content and then navigating away to follow the anchor’s link.

If we go one step further, we can change the anchor to call an action within our application. Presumably that action would render the time for us, and return the proper complete HTML.<a href=_"setTime.jsp"_ id=_"clickToSetTime"_>Click</a>This gives us an additional benefit of having a functioning web application if the user has a browser without JavaScript enabled (or one without JavaScript support). In this case, if JavaScript is unavailable or jQuery isn’t loaded, the event isn’t added to our anchor, so the anchor’s original action would occur. In our enhanced example, this would call a JSP in our application.

This, of course, requires us to have other resources in our application. This can also be accomplished by making our simple page “smarter” so it will have this dual functionality. Consider this final change to our original page (which now must be a JSP instead of possibly a static HTML page):

<html>
<head>
<meta http-equiv=_"Content-Type"_ content=_"text/html; charset=UTF8"_>
<title>Example</title>
<script type=_"text/javascript"_ src=_"http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"_></script>
<script type=_"text/javascript"_> **function** setTime(){ $("#time").html(**new** Date().toLocaleTimeString());
}
$(**function**() { $("#clickToSetTime").click(**function**(event){ event.preventDefault();
  setTime();
 });
}); </script>
</head>
<body>  
<div>  
 <a href=_"setTime.jsp"_ id=_"clickToSetTime"_>Click</a>  
</div>  
<div id=_"time"_>   <%=  **new** java.text.SimpleDateFormat("HH:mm:ss").format(**new** java.util.Date()) %>
</div>
</body>
</html>

Savvy readers will note that this changes from our original example by injecting a time into our application on the first call, which doesn’t match our original noted intent. This argument is outside of the scope of this short discussion. There are many methods that can be used to determine if the page is being requested because of the click of the anchor.

Share this Post

Related Blog Posts

JavaScript

Using CometDs hidden subscribeProps

September 27th, 2012

ConetD, a bayeux implementation, has a poorly documented feature that allows you to send information along with a subscription request: subscribeProps

Scott Bock
JavaScript

Rendering JSP Versus Static HTML Completed With AJAX

September 4th, 2012

Intelligent and careful use of JavaScript can enhance the user experience by providing not only the client-side functionality, but by completing the content.

Object Partners
JavaScript

Ternary Operations in JSTL

August 23rd, 2012

An often overlooked operator, in JavaScript (and elsewhere), is the ternary operator.

Object Partners

About the author

Object Partners

The Company

Insert bio here