Click here to close now.

Welcome!

Weblogic Authors: Elizabeth White, Michael Meiner, Michael Bushong, Avi Rosenthal

Related Topics: Java IoT, Microservices Expo, IBM Cloud, Weblogic, IoT User Interface, Apache

Java IoT: Article

Book Excerpt: jQuery Essentials | Part 1

An introduction to jQuery

This excerpt is from the book Murach's JavaScript and jQuery by Mike Murach and Zak Ruvalcaba.

Now that you have the JavaScript skills that you need for using jQuery, you're ready to learn jQuery. So, in this excerpt, you'll learn a working subset of jQuery that will get you off to a fast start.

When you complete this section, you'll have all the jQuery skills that you need for developing professional web pages. You can also go on to any of the three sections that follow because they are written as independent modules. If, for example, you want to learn how to use Ajax next, skip to section 4.

Get off to a fast start with jQuery
In this excerpt you'll quickly see how jQuery makes JavaScript programming easier. Then, you'll learn a working subset of jQuery that will get you off to a fast start. Along the way, you'll study four complete applications that will show you how to apply jQuery.

Introduction to jQuery
In this introduction, you'll learn what jQuery is, how to include it in your applications, and how jQuery, jQuery UI, and plugins can simplify JavaScript development.

What jQuery is
As Figure 1 summarizes, jQuery is a free, open-source, JavaScript library that provides dozens of methods for common web features that make JavaScript programming easier. Beyond that, the jQuery functions are coded and tested for cross-browser compatibility, so they will work in all browsers.

What jQuery offers

Dozens of methods that make it easier to add JavaScript features to your web pages

ŸMethods that are tested for cross-browser compatibility

How to include the jQuery file after you've downloaded it to your computer

<script src="jquery-1.8.2.min.js"></script>

How to include the jQuery file from a Content Delivery Network (CDN)

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

Description

ŸjQuery is a free, open-source, JavaScript library that provides methods that make JavaScript programming easier. Today, jQuery is used by more than 50% of the 10,000 most-visited web sites, and its popularity is growing rapidly.

ŸThe jQuery download comes in two versions. One version (min) is a compressed version that is relatively small and loads fast. The other version is uncompressed so you can use it to study the JavaScript code in the library.

ŸIf you include the jQuery file from a Content Delivery Network (CDN), you don't have to provide it from your own server, but then you can't work offline.

ŸThe jQuery CDN now provides a link that will always deliver the latest version of jQuery. That's the way the script element is coded in all of the applications in this book.

ŸIf you download the jQuery file to your system, you can change the filename so it's simpler, but then you may lose track of what version you're using.

Figure 1: What jQuery is and how to include it in your applications

Those are two of the reasons why jQuery is used by more than half of the 10,000 most-visited web sites today. And that's why jQuery is commonly used by professional web developers. In fact, you can think of jQuery as one of the four technologies that every web developer should know how to use: HTML, CSS, JavaScript, and jQuery. But don't forget that jQuery is actually JavaScript.

How to include jQuery in your web pages
If you go to the web site that's shown in this figure, you'll find a download button that lets you download the single file that contains the jQuery core library. By default, the version that's downloaded is a compressed version that today is around 32KB. As a result, this version loads quickly into browsers, which is another reason why developers like jQuery.

The other version is uncompressed and currently about 247KB. If you download this version, you can study the JavaScript code that's used in the library. But beware, this code is extremely complicated.

Once you've downloaded the compressed version of the core library, you can include it in a web page by coding a script statement like the first one in this figure. Then, if you store the file on your own computer or a local web server, you'll be able to develop jQuery applications without being connected to the Internet. For production applications, though, you'll need to deploy the file to your Internet web server.

In this script statement, the file name includes the version number, but you can use whatever file name you want. However, if the file name doesn't include the version number, it's easy to lose track of which version you're using.

The other way to include the jQuery library in your web applications and the one we recommend is to get the file from a Content Delivery Network (CDN). A CDN is a web server that hosts open-source software, and the Google, Microsoft, and jQuery web sites are CDNs for getting the jQuery libraries. In the second example in this figure, the script element uses the jQuery CDN with a URL that gets the latest version of jQuery, and that's the way all of the applications in this book include the jQuery library.

The benefit to using a CDN is that you don't have to download the jQuery file. This works especially well with the jQuery CDN and the "latest" URL. Then, you don't have to change the URL when a new release becomes available. The disadvantage is that you have to be connected to the Internet to use a CDN.

How jQuery can simplify JavaScript development
To show you how jQuery can simplify JavaScript development, Figure 2 shows both the JavaScript and the jQuery for the FAQs application that you learned how to develop in chapter 6. If you're like most people who are learning JavaScript, you probably found the JavaScript code for this application both complicated and confusing. That's because it is.

The JavaScript for the application

var $ = function (id) {
return document.getElementById(id);
}
window.onload = function () {
var faqs = $("faqs");
var h2Elements = faqs.getElementsByTagName("h2");
var h2Node;
for (var i = 0; i < h2Elements.length; i++ ) {
h2Node = h2Elements[i];
// Attach event handler
h2Node.onclick = function () {
var h2 = this;         // h2 is the current h2Node object
if (h2.getAttribute("class") == "plus") {
h2.setAttribute("class", "minus");   
}
else {
h2.setAttribute("class", "plus");
}
if (h2.nextElementSibling.getAttribute("class") == "closed") {
h2.nextElementSibling.setAttribute("class", "open");
}
else {
h2.nextElementSibling.setAttribute("class", "closed");
}
}
}
}

The jQuery for the application

$(document).ready(function() {
$("#faqs h2").toggle(
function() {
$(this).addClass("minus");
$(this).next().show();
},
function() {
$(this).removeClass("minus");
$(this).next().hide();
}
);  // end toggle
}); // end ready

Figure 2: How jQuery can simplify JavaScript development

In contrast, the jQuery code takes less than half as many lines of code. You'll also find that it is much easier to understand once you learn how to use the JQuery selectors, methods, and event methods. And you'll start learning those skills right after this introduction.

Incidentally, jQuery uses CSS selectors to select the HTML elements that the methods should be applied to. For instance,

$("#faqs h2")

is a jQuery selector for the CSS selector

#faqs h2

which selects all of the h2 elements in the element with "faqs" as its id. In fact, jQuery supports all of the CSS selectors including the CSS3 selectors, even in browsers that don't support all of the CSS3 selectors. This is another reason why developers like jQuery.

How jQuery can affect testing and debugging
When you use jQuery to develop applications, you can use the same testing and debugging skills that you learned in chapter 4. Remember, though, that a call to a jQuery method is a call to the jQuery file that you specify in a script element in the head section of the HTML. In other words, when your code executes a jQuery method, it is the JavaScript in the jQuery file that does the processing.

Then, if the jQuery code can't be executed, the display in Firebug or in the error console of the browser will point to a statement in the jQuery file. This can happen, for example, because a faulty parameter is passed to a jQuery method. Unfortunately, the information in Firebug or the error console doesn't tell you which statement in your code caused the problem. Instead, you have to use the other debugging techniques to find the bug and fix it.

In most cases, though, Firebug and the error console of the browser do provide information that helps you find and fix the bug. So this is a minor problem that is more than compensated for by the benefits that you get from using jQuery.

How jQuery UI and plugins can simplify JavaScript development
Besides the core jQuery library, jQuery provides the jQuery UI (User Interface) library. The functions in this library use the core jQuery library to build advanced features that can be created with just a few lines of code. These features include themes, effects, widgets, and mouse interactions.

For instance, the browser display in Figure 3 shows the FAQs application as a jQuery UI widget known as an accordion. To implement this widget, you just need the three lines of JavaScript code that are highlighted, and that also applies the formatting that's shown.

To use jQuery UI, you include a jQuery UI library file in your web pages in much the same way that you include the jQuery core library. You also include a jQuery UI CSS file that provides the themes for jQuery UI. In section 3, you'll learn how to do that, and you'll learn how to use the features of jQuery UI.

The HTML for a jQuery UI accordion

<div id="accordion">
<h3><a href="#">What is jQuery?</a></h3>
<div> <!-- panel contents --> </div>
<h3><a href="#">Why is jQuery becoming so popular?</a></h3>
<div> <!-- panel contents --> </div>
<h3><a href="#">Which is harder to learn: jQuery or JavaScript?></a></h3>
<div> <!-- panel contents --> </div>
</div>

The JavaScript code for the jQuery UI accordion

<script>
$(document).ready(function() {
$("#accordion").accordion();
});
</script>

Some typical plugin functions

ŸData validation

ŸSlide shows

ŸCarousels

Description
jQuery UI is a free, open-source, JavaScript library that provides higher-level effects, widgets, and mouse interactions that can be customized by using themes. In section 3, you'll learn how to use jQuery UI.

A plugin is a JavaScript library that provides functions that work in conjunction with jQuery to make it easier to add features to your web applications. In chapter 11, you'll learn how to use some of the most useful plugins, and you'll also learn how to create your own plugins.

In general, if you can find a plugin or jQuery UI feature that does what you want it to do, you should use it. Often, though, you won't be able to find what you want so you'll need to develop the feature with just the core jQuery library.

Figure 3: How jQuery UI and plugins can simplify JavaScript development

Because jQuery UI can make JavaScript development even easier than it is when using jQuery, it makes sense to use jQuery UI whenever it provides an effect, widget, or mouse interaction that you need. Keep in mind, though, that jQuery UI is limited, so you'll still need jQuery for most of your web applications. As a result, you should think of jQuery UI as an add-on that you should learn how to use after you master jQuery.

Besides jQuery UI, the jQuery web site provides access to dozens of plugins that have been developed for jQuery. These plugins provide higher-level functions like data validation and drop-down menus that require minimal coding for their implementation. To facilitate the development of plugins, jQuery provides specifications that help standardize the way that plugins are implemented. Plugins are one more reason why developers like jQuery.

Like jQuery UI, plugins are libraries that make use of the core jQuery library. In fact, you can think of jQuery UI as a plugin. To use a plugin, you use a script element to include the plugin file in a web page, and you code that script element after the script element for the jQuery core library. In chapter 11, you'll learn how to get the most from plugins, and you'll also learn how to create your own plugins.

In practice, it makes sense to look first for a plugin that implements a feature that you want to add to a web page. If you can find one, you may be able to do in a few hours what would otherwise take a few days. Next, if you can't find a suitable plugin, it makes sense to see whether jQuery UI can facilitate the implementation of the feature. Finally, if neither a plugin nor jQuery UI can help you implement a feature, you have to use jQuery to develop it. That's why you need to master all of the jQuery skills in this section.

More Stories By Mike Murach

As a freelance writer many years ago, Mike Murach decided that he had to develop his own writing methods because the ones that others were using clearly didn’t work. Since then, Mike and his staff have continued to refine those methods, so today every Murach book becomes the best one on its subject. Now, after a long hiatus from writing, Mike has teamed with Zak Ruvalcaba to write Murach’s JavaScript and jQuery.

More Stories By Zak Ruvalcaba

Zak Ruvalcaba has been researching, designing, and developing for the Web since 1995. He holds a BS from San Diego State University and an MS in instructional technology from National University in San Diego.

Zak's skillset includes HTML/HTML5, CSS/CSS3, JavaScript, jQuery, ASP.NET, ADO.NET, Visual Basic, C#, Web Services, and Flash/ActionScript. He is also a Microsoft Certified Application Developer for .NET (MCAD) and a Microsoft Certified Solutions Developer for .NET (MCSD).

In his spare time, Zak teaches web development courses for the San Diego Community College District, Mt. San Jacinto Community College and Palomar Community College.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


@ThingsExpo Stories
The enterprise market will drive IoT device adoption over the next five years. In his session at @ThingsExpo, John Greenough, an analyst at BI Intelligence, division of Business Insider, analyzed how companies will adopt IoT products and the associated cost of adopting those products. John Greenough is the lead analyst covering the Internet of Things for BI Intelligence- Business Insider’s paid research service. Numerous IoT companies have cited his analysis of the IoT. Prior to joining BI Intelligence, he worked analyzing bank technology for Corporate Insight and The Clearing House Payment...
"ciqada is a combined platform of hardware modules and server products that lets people take their existing devices or new devices and lets them be accessible over the Internet for their users," noted Geoff Engelstein of ciqada, a division of Mars International, in this SYS-CON.tv interview at @ThingsExpo, held June 9-11, 2015, at the Javits Center in New York City.
SYS-CON Events announced today that Secure Infrastructure & Services will exhibit at SYS-CON's 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Secure Infrastructure & Services (SIAS) is a managed services provider of cloud computing solutions for the IBM Power Systems market. The company helps mid-market firms built on IBM hardware platforms to deploy new levels of reliable and cost-effective computing and high availability solutions, leveraging the cloud and the benefits of Infrastructure-as-a-Service (IaaS...
SYS-CON Events announced today that ProfitBricks, the provider of painless cloud infrastructure, will exhibit at SYS-CON's 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. ProfitBricks is the IaaS provider that offers a painless cloud experience for all IT users, with no learning curve. ProfitBricks boasts flexible cloud servers and networking, an integrated Data Center Designer tool for visual control over the cloud and the best price/performance value available. ProfitBricks was named one of the coolest Clo...
The 4th International Internet of @ThingsExpo, co-located with the 17th International Cloud Expo - to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA - announces that its Call for Papers is open. The Internet of Things (IoT) is the biggest idea since the creation of the Worldwide Web more than
"In the IoT space we are helping customers, mostly enterprises and industry verticals where time-to-value is critical, and we help them with the ability to do faster insights and actions using our platform so they can transform their business operations," explained Venkat Eswara, VP of Marketing at Vitria, in this SYS-CON.tv interview at @ThingsExpo, held June 9-11, 2015, at the Javits Center in New York City.
SYS-CON Events announced today that WHOA.com, an ISO 27001 Certified secure cloud computing company, participated as “Bronze Sponsor” of SYS-CON's 16th International Cloud Expo® New York, which took place June 9-11, 2015, at the Javits Center in New York City, NY. WHOA.com is a leader in next-generation, ISO 27001 Certified secure cloud solutions. WHOA.com offers a comprehensive portfolio of best-in-class cloud services for business including Infrastructure as a Service (IaaS), Secure Cloud Desktop, Cloud Storage, Disaster Recovery, Integrated Applications and Security.
SYS-CON Events announced today that Intelligent Systems Services will exhibit at the 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. Established in 1994, Intelligent Systems Services Inc. is located near Washington, DC, with representatives and partners nationwide. ISS’s well-established track record is based on the continuous pursuit of excellence in designing, implementing and supporting nationwide clients’ mission-critical systems. ISS has completed many successful projects in Healthcare, Commercial, Manu...
The Internet of Things is not only adding billions of sensors and billions of terabytes to the Internet. It is also forcing a fundamental change in the way we envision Information Technology. For the first time, more data is being created by devices at the edge of the Internet rather than from centralized systems. What does this mean for today's IT professional? In this Power Panel at @ThingsExpo, moderated by Conference Chair Roger Strukhoff, panelists addressed this very serious issue of profound change in the industry.
With major technology companies and startups seriously embracing IoT strategies, now is the perfect time to attend @ThingsExpo in Silicon Valley. Learn what is going on, contribute to the discussions, and ensure that your enterprise is as "IoT-Ready" as it can be! Internet of @ThingsExpo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, is co-located with 17th Cloud Expo and will feature technical sessions from a rock star conference faculty and the leading industry players in the world. The Internet of Things (IoT) is the most profound change in personal an...
SYS-CON Events announced today that kintone has been named “Bronze Sponsor” of SYS-CON's 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. kintone promotes cloud-based workgroup productivity, transparency and profitability with a seamless collaboration space, build your own business application (BYOA) platform, and workflow automation system.
SYS-CON Events announced today that SoftLayer, an IBM company, has been named “Gold Sponsor” of SYS-CON's 17th International Cloud Expo®, which will take place November 3–5, 2015 at the Santa Clara Convention Center in Santa Clara, CA. SoftLayer operates a global cloud infrastructure platform built for Internet scale. With a global footprint of data centers and network points of presence, SoftLayer provides infrastructure as a service to leading-edge customers ranging from Web startups to global enterprises. SoftLayer’s modular architecture, full-featured API, and sophisticated automation pro...
Discussions about cloud computing are evolving into discussions about enterprise IT in general. As enterprises increasingly migrate toward their own unique clouds, new issues such as the use of containers and microservices emerge to keep things interesting. In this Power Panel at 16th Cloud Expo, moderated by Conference Chair Roger Strukhoff, panelists addressed the state of cloud computing today, and what enterprise IT professionals need to know about how the latest topics and trends affect their organization.
17th Cloud Expo, taking place Nov 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, will feature technical sessions from a rock star conference faculty and the leading industry players in the world. Cloud computing is now being embraced by a majority of enterprises of all sizes. Yesterday's debate about public vs. private has transformed into the reality of hybrid cloud: a recent survey shows that 74% of enterprises have a hybrid cloud strategy. Meanwhile, 94% of enterprises are using some form of XaaS – software, platform, and infrastructure as a service.
SYS-CON Events announced today that CommVault has been named “Bronze Sponsor” of SYS-CON's 17th International Cloud Expo®, which will take place on November 3–5, 2015, at the Santa Clara Convention Center in Santa Clara, CA. A singular vision – a belief in a better way to address current and future data management needs – guides CommVault in the development of Singular Information Management® solutions for high-performance data protection, universal availability and simplified management of data on complex storage networks. CommVault's exclusive single-platform architecture gives companies unp...
Buzzword alert: Microservices and IoT at a DevOps conference? What could possibly go wrong? In this Power Panel at DevOps Summit, moderated by Jason Bloomberg, the leading expert on architecting agility for the enterprise and president of Intellyx, panelists peeled away the buzz and discuss the important architectural principles behind implementing IoT solutions for the enterprise. As remote IoT devices and sensors become increasingly intelligent, they become part of our distributed cloud environment, and we must architect and code accordingly. At the very least, you'll have no problem fillin...
The 17th International Cloud Expo has announced that its Call for Papers is open. 17th International Cloud Expo, to be held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA, brings together Cloud Computing, APM, APIs, Microservices, Security, Big Data, Internet of Things, DevOps and WebRTC to one location. With cloud computing driving a higher percentage of enterprise IT budgets every year, it becomes increasingly important to plant your flag in this fast-expanding business opportunity. Submit your speaking proposal today!
The 5th International DevOps Summit, co-located with 17th International Cloud Expo – being held November 3-5, 2015, at the Santa Clara Convention Center in Santa Clara, CA – announces that its Call for Papers is open. Born out of proven success in agile development, cloud computing, and process automation, DevOps is a macro trend you cannot afford to miss. From showcase success stories from early adopters and web-scale businesses, DevOps is expanding to organizations of all sizes, including the world's largest enterprises – and delivering real results. Among the proven benefits, DevOps is corr...
Internet of Things (IoT) will be a hybrid ecosystem of diverse devices and sensors collaborating with operational and enterprise systems to create the next big application. In their session at @ThingsExpo, Bramh Gupta, founder and CEO of robomq.io, and Fred Yatzeck, principal architect leading product development at robomq.io, discussed how choosing the right middleware and integration strategy from the get-go will enable IoT solution developers to adapt and grow with the industry, while at the same time reduce Time to Market (TTM) by using plug and play capabilities offered by a robust IoT ...
Today air travel is a minefield of delays, hassles and customer disappointment. Airlines struggle to revitalize the experience. GE and M2Mi will demonstrate practical examples of how IoT solutions are helping airlines bring back personalization, reduce trip time and improve reliability. In their session at @ThingsExpo, Shyam Varan Nath, Principal Architect with GE, and Dr. Sarah Cooper, M2Mi’s VP Business Development and Engineering, will explore the IoT cloud-based platform technologies driving this change including privacy controls, data transparency and integration of real time context wi...