PART I JAVAWHAT? THE WHERE, WHY, AND HOW OF JAVASCRIPT
Chapter 14 Working with images in JavaScript 235
an introduction to JavaScript libraries and frameworks
After completing this chapter, you will be able to
■
■ Understand the role of JavaScript programming libraries and frameworks.
■
■ Understand how to define your own library.
■
■ Understand the role of third-party JavaScript libraries and frameworks and how to find more information about them.
Understanding programming libraries
In programming terms, a library is a grouping of code that provides common or additional func- tionality. Typically, libraries consist of one or more files that expose objects and functions. Within a program, a developer includes or calls the library to use these additional objects and functions. In this way, JavaScript libraries and frameworks are useful because they offload the maintenance and devel- opment of additional and enhanced functions. They help make common programming tasks easier and can also aid in smoothing out the differences and nuances in cross-browser development.
This chapter explores libraries in JavaScript, including the process of defining your own library, and takes a look at some of the more popular JavaScript libraries and frameworks available.
Defining your own JavaScript library
Developers working in any language find themselves performing common functions repeatedly in
Creating a library
1. Using Microsoft Visual Studio, Eclipse, or the editor of your choice, open the library.js file, which you can find in the Chapter10 folder of this book’s companion content.
2. Within library.js, add the following code (replacing the TODO comment), and then add a function:
var MyLibrary = {};
MyLibrary.sendAlert = function(mesg, elm) { alert(mesg);
};
3. Save the file and close it.
4. Open the file librarypage.html. Within librarypage.html, add the boldface code shown here (replacing the TODO comment):
<!doctype html>
<html>
<head>
<title>A Basic Example</title>
<script type="text/javascript" src="library.js"></script>
</head>
<body>
<script type="text/javascript">
MyLibrary.sendAlert("hello, this is the message");
</script>
</body>
</html>
5. Load the page librarypage.html in a web browser. You should receive an alert like this:
Tip If you don’t receive an alert like the one just shown, be sure you have specified the path to the library.js file correctly. The example shown in the preceding librarypage.html code assumes that the JavaScript file library.js is in the same directory as the HTML file.
Take care when defining and using your own libraries so that you don’t overlap or collide with existing functions and reserved words from the ECMA-262 specification. Additionally, if you use an external library or framework such as jQuery or YUI, you need to make sure that your library doesn’t collide with the naming conventions used for those.
Looking at popular JavaScript libraries and frameworks
There are numerous publicly available libraries and frameworks for JavaScript. Their goal is to take difficult tasks and make them easier for programmers developing JavaScript-centric web applications.
Web developers spend a great deal of time trying to make pages look and act the same way across browsers. A significant advantage to using many JavaScript libraries or frameworks is that they remove the cross-browser compatibility headaches. All the popular JavaScript libraries and frame- works include code to make their respective functions work across all the browsers they support.
jQuery
jQuery provides a rich feature set, powerful options, extensibility, and excellent community support.
Using jQuery, which is contained in a single JavaScript file, you can add effects to your webpages, enhance usability, and make processing of data with Asynchronous JavaScript and XML (AJAX) easier.
Additionally, Microsoft shipped jQuery beginning with Visual Studio 2010. Chapter 11, “An introduc- tion to jQuery,” examines jQuery in greater detail. You can find more information about jQuery at http://jquery.com.
Modernizr
Modernizr enables developers to use some of the more advanced features of HTML5 and CSS3 in older browsers. It uses feature detection to determine whether a given browser supports a certain widget or effect and provides an alternative means of accomplishing the task at hand. More informa- tion about Modernizr can be found at http://modernizr.com/.
Yahoo! User interface
Yahoo! User Interface (YUI) provides both JavaScript and Cascading Style Sheets (CSS), which sim- plifies developing web applications. Like jQuery, YUI includes features for enhancing usability and
MooTools
MooTools is a very small, highly optimized library for JavaScript. MooTools differs from YUI and jQuery because it is an object-oriented framework that concentrates on providing greater modu- larity and code reuse, whereas YUI and jQuery focus on effects, CSS, and direct user-experience interactions. That’s definitely not to say that MooTools doesn’t have effects—MooTools also offers many of the same effects (such as an accordion and a slider) that you find in YUI and jQuery.
MooTools is recommended for intermediate to advanced JavaScript programmers and is available from http://mootools.net/.
Other libraries
There are numerous other libraries and frameworks available for JavaScript—too many to cover or even mention in this book. As a starting point, see http://en.wikipedia.org/wiki/Comparison_of _JavaScript_frameworks to find out more information about JavaScript frameworks.
Exercises
1. Examine each of the libraries and frameworks shown in this chapter. Which do you think is easiest for the new JavaScript programmer to learn? Why?
2. Create your own JavaScript library with an external JavaScript file. Include that file in an HTML page and call it.