Murach's JQuery - my book review

Murach’s jQuery

 2^nd Edition

By Zak Ruvalcaba and Anne Boehm

Section 1 – JavaScript essentials for jQuery users

Chapter 1 – Page 3 – Introduction to web development.

As I am already familiar with basics of web development, I only skimmed through this chapter. I typed in your email program and it worked OK (after I got rid of my typing errors!). I only needed to skim through the rest of this chapter as I am quite familiar with the contents.

Chapter 2 – Page 49 – A JavaScript subset for jQuery users.

As I read through this chapter, I found it a good refresher. I did not need to study it in depth as I am already familiar with the concepts presented.

Chapter 3 – Page 99 – How to script the DOM with JavaScript.

This chapter provided a good refresher in the whole idea of scripting the DOM. I had studies this in your previous book (JavaScript 2^nd Edition), but it was still worth going through it to update the concepts presented.

DOM scripting is fairly complicated is fairly complicated and it was worth studying all the examples that were presented.

All the examples worked well and I got up to speed very quickly.

Chapter 4 – Page 133 – How to test and debug a JavaScript or jQuery application.

I did not bother with this chapter as I have found that you only learn debugging by practice.

Section 2 – jQuery essentials

Chapter 5 - Get off to a fast start with jQuery.

Page 158 – 159 Introduction to jQuery.

These pages were a nice introduction to just what jQuery can do.

Page 160 – 161 How jQuery can simplify JavaScript

development

The example you present on page 161 sure looks much simpler than the original FAQ application.

Page 162 – 163 How jQuery and plugins can simplify JavaScript development.

It was good to explain that jQuery is an add on to JQuery.

Page 164 – 165 The basics of jQuery programming.

These pages provided a good discussion of how to use the jQuery library in your application, as well as the migrate plugin.

Page 166 – 167 How to code jQuery selectors.

I had to read through these pages a few times to make sense of them. The key bit was that the item inside the parenthesis was a CSS selector. The key thing to understand that the dollar sign refers to the jQuery library and that we code selectors by using the CSS syntax.

Page 168 – 169 How to call jQuery methods.

These pages gave me the impression that jQuery is certainly a lot easier to use than JavaScript.

Page 170 – 171 How to use jQuery event methods.

These pages provided a good exercise on how to code the jQuery event methods.

Page 172 – 175 The email application in jQuery.

By studying the jQuery code on page 175, it was noticeable that there is a difference with the earlier versions of the Email List application.

Page 176– 177 A working subset of selectors, methods and event methods.

These pages were a lot to take in. I think that it will take practice eto get good at it.

Page 178 – 179 The most useful methods.

All I could do was read through these methods and try to make sense of them.

Page 180 – 181 The most useful event methods.

Again, all I could do was read through these methods and try to make sense of them.

Page 182 – 183 Other event methods that you should be aware of.

Same as in the previous examples. It will take time and practice to get used to them all.

Pages 184 – 191 Three illustrative applications.

Again, all I could do was read through these methods and try to make sense of them.

Page 184 – The FAQ’s application.

It was impressive just how brief the JavaScript application is. JQuery certainly trims things down a fair bit.

Page 186 – The image swap application in jQuery.

Again, what is interesting is just how much simpler the JavaScript code is.

Page 190 – The image Rollover application in jQuery.

Same as in the previous two examples.

Perspective.

This chapter did provide a useful introduction into a working subset of the most useful jQuery selectors. While it does give me an idea of what there is to work with, I can see that it will take time and practice to get seriously good at it. It is just as well that you presented some good examples to work with.

Chapter 6 – How to use effects and animations.

Page 196 – 197 How to use effects.

These pages gave an overview of the jQuery effects. I would like to see a few good examples.

Page 198 – 199 The FAQ’s application with jQuery effects.

When I ran this program in my browser, the heading animation came in from the left side as it was supposed to, but then the rest of the program did not work. When I clicked anywhere, nothing happened.

Page 200 – 201 A slide show animation with effects.

At least this program worked as well as it was supposed to.

Page 202 – 203 Two ways to decode the jQuery.

I was pleased to see that both your examples worked well. I read through the text on page 202 and the jQuery on page 203. I cannot say that I understood them both in depth but I am confident that if I needed to use a slide show application in any of my projects, your example would be a good place to start.

Page 204 – 205 How to stop and start a slide show.

Again, your examples worked well. I could only read through the text and jQuery examples and make the best of them that I could.

Page 206 – 207 How to use animation.

After reading through these pages, I can see where it will take practice to get good with jQuery.

Page 208 – 209 How to chain animate methods.

Same as above.

Page 210 – 211 How to use the delay, stop and finish methods.

Page 212 – 213 How to use easing’s with effects and animations.

Page 214 – 215 How to use the advanced animate syntax and the methods for working with queries.

I read through pages 210- 215 with not a huge deal of understanding. Some useful examples would have been good here.

Page 216 - A carousel application with animation.

After studying the HTML, CSS and the jQuery for this application, I was able to make sense of it. I am pleased to say the Carousel application worked well and I could use it in my own applications.

Perspective.

I did my best to make as much sense of this chapter as I could. Because jQuery is JavaScript, I can see that it will take time to become good at it, but I am confident that I can now use effects and animations in my own programs.

Chapter 7 – How to create and use jQuery plugins.

Page 224 – 227 Introduction to plugins.

Nice to know where I can find the jQuery plugins as well as where the most useful plugins are.

Page 228 – 229 How to use any plugin.

I read through these pages and then tried the bxSlider program. Thankfully, it worked well. These pages provided a good description about how to use a jQuery plugin.

Page 230 – 235 How to use three of the most useful plugins.

I read through these examples one by one and they all worked well. I am sure I could have no trouble using them in my own applications if I had to.

Page 236 – 241 How to create your own plugins.

I read through pages 237 – 237 without getting a huge understanding of what was going on. Your example on pages 238 – 239 certainly cleared things up a bit. But I also know that I can get the same effect with just using CSS. I don’t think that I will be writing my own jQuery plugins any time soon.

Page 242 – 243 A web page that uses two plugins.

This program looks pretty easy to use. I am sure that I could use it if I needed to.

Perspective.

This chapter did a good job of showing me where to find jQuery plugins. I am sure they would be easy enough to use given the correct documentation. I don’t think that I will be writing my own plugins any time soon however.

Chapter 8 – How to work with forms and data validation.

Page 250 – 251 Introduction to forms and controls.

I already knew most of this.

Page 252 – 253 The HTML5 controls for working with forms.

I typed in the example on page 253. The data validation worked with the email field in all the browsers I tried.

Page 254 – 255 The HTML5 and CSS3 features for data validation.

After typing in the example on page 258, I found that it validated in Firefox and IE but not in Chrome.

Page 256 – 257 How to use jQuery to work with forms.

It took me a while to go through these pages. While I understood what is involved. It will take time to get a good grip on it all.

Page 258 – 259 The jQuery event method for forms.

These two pages made for some heavy reading. Again, I understood the concepts of the pages, but learning how to code them will be tricky.

Page 260 – 263 A validation application that uses JavaScript.

I was intrigued to see that JavaScript can add a span after each element. Going through this code it was interesting to see how JavaScript is used for form validation and why it is useful to know JavaScript.

Page 264 – 265 How to use a plugin for data validation.

The book discusses the plugin you got from http://jqueryvalidation.org. I feel that maybe you need to supply a bit more info as I was not sure about this particular plug-in.

Page 266 – 267 The options and the default error messages for the validation plugin.

I found this whole discussion about the validation plugin a bit confusing. It was very thorough but like everything else to do with JQuery and JavaScript, it will take a lot of getting used to.

Page 268 – 273 A validation application that uses the validation plugin.

After reading through your text and studying the HTML on the form, it is easy to see why validation is required. I was pleased to see that the jQuery for the member.js file was rather easy to follow.

Perspective.

This chapter did give a good lecture on how to use jQuery for form validation. Like everything else to do with jQuery, there was a lot to take in. The last example was a big file but was easy to understand, even the jQuery in the members.js file.

I gives me some confidence that I can use my own jQuery form validation if I have to.

Chapter 9 – How to use the DOM manipulation and traversal methods.

Page 278 – 279 The DOM manipulation methods.

This was generally easy enough to understand as I read through it.

Page 280 – 281 The methods for DOM replacement.

The examples were easy to understand.

Page 282 – 283 The methods for DOM insertion and cloning.

Well written and easy enough to understand. Some small examples to practice with would be good here.

Page 284 – 285 The methods for DOM wrapping and removal.

I am not sure why you would want to wrap and remove DOM elements.

Page 286 – 287 The TOC application.

Looking at how this program works and then looking at the HTML, it is impressive to realize that jQuery can use to modify the HTML.

Page 288 – 289 The jQuery

Looking at the jQuery, it starts to make more sense as to why we need to manipulate the DOM. It does add a lot more power to HTML. 

Page 290 – 291 The methods for working with styles and positioning.

It was interesting to see how jQuery can help us to manipulate the CSS.

Page 292 – 293 The methods for positioning elements.

I was not sure what was being written about here until I read the enhanced TOC program.

Page 294 – 295 The enhanced TOC application.

It was very impressive to watch this application in action – to see how the table of contents scrolled down to be level with each heading. Having looked through the JavaScript on page 295, the topics on the previous page made sense.

Page 296 – 297 The two event methods used with DOM traversal.

There was a lot of text here. The simple examples made sense.

Page 298 – 301 An employee list application that uses the on method.

The program looked interesting at first. It was nice to be able to add new employees to the web page. However, when the web page closed down and was restarted, the new employees were not there. I feel that it would be better to use a database for this type of thing.

Page 302 – 307 A slide show application that uses DOM traversal methods.

I was pleased to see that this application worked well in all browsers. It really is just another way of doing things we have done before.

Perspective

Traversing the DOM is one of the more powerful features of Javascript but also one of the more complicated. I found this chapter somewhat complicated but I was very impressed by your examples, especially the enhanced TOC application on page 294.

Section 3 – jQuery UI essentials

Chapter 10 - Get off to a fast start with jQuery UI themes and Widgets.

Page 314 – 315 Introduction to jQuery UI.

These pages were largely self-explanatory.

Page 316 – 317 The jQuery UI components.

That was certainly a long list on page 317. It was worth mentioning that HTML5 does the same job as some of these widgets.

Page 318 – 319 How to build and use a jQuery download.

The jQuery folder downloaded successfully.

Page 320 – 321 How to use the Theme Roller to build a custom theme.

I found the Theme Roller simple to use.

Page 322 – 323 How to use the downloaded folder and files.

I chose a green and blue for the download. After completing the download, I studied the index.html. I noticed that everything works fine in this file. Everything came up OK.

When I looked at the HTML in the index file, it did not look anything like the text you have on page 323 that says “How to include the downloaded files in your application”.

In the index.html, all your JavaScript was at the bottom of the page. I got more information from this file than I did from your text.

Page 324 – 325 How to jQuery UI widgets.

I noticed that the examples on the jQuery website all work well enough.

Page 326 – 327 How to use the Accordion widget.

The Accordion widget you provided worked well and the text is easy to follow.

Page 328 – 329 How to use the tabs widget.

Same as in the previous example. Everything works fine and the coding is easy to follow.

Page 330 – 339 using the Button, Dialog, Auto complete, Datepicker, slider and menu widget.

As the examples all worked well and were easy to follow, there was almost no need to read through the text in these pages.

Page 340 – 345 A web page that uses jQuery UI.

It was interesting how you coded the various widgets within the tabs widget. It was also noticeable that you put all the functions to operate all the widgets in a separate JavaScript file.

Can you please tell me what a Spinner is used for???

Perspective

This chapter was a great introduction to jQuery UI. I do feel confident that I can use jQuery in my own application. I was impressed at just how simple the jQuery code is that was used in your examples. 

Chapter 11 – How to use jQuery UI interactions and effects.

Page 350 – 351 How to use interactions.

I noticed that this example worked well in Internet Explorer than it did in Google Chrome. Chrome allowed me to manually re size it whereas Explorer did not.

Page 352 – 353 How to use the draggable and droppable interactions.

I studied all the interactions and effects in the jQuery website and they all worked well. I am pleased to say that the example you provided worked well and was easy to follow, but I am sure why anybody would want to add such effects to a web page. They could mess the page up a bit.

Page 354 – 355 How to use the resizable interaction.

I thought that this was a useful interaction. The example you provided worked well.

Page 356 – 357 How to use the selectable interaction.

This was new to me. It means that you can select an image rather than just a select box or a button list. Interesting idea!

Page 358 – 359 How to use the sortable interaction.

I am not sure why you would use this in an actual web page. Might confuse some readers. The examples worked well and were easy to follow.

Page 360 – 363 How to use effects.

I looked through the effects on the jQuery website. I feel that you should use these effects sparingly, if at all because they could make a website look a bit cheesy if overused.

Page 364 – 365 How to use colour transitions.

On my computer this example worked well with all the browsers that I tried it in.

Page 366 – 367 How to use class transitions.

As above. This example worked well in all browsers.

Page 368 – 369 How to use visibility transitions.

Once again your example worked well and was easy to follow. This type of thing can also be done with JavaScript or straight CSS.

Perspective

This chapter was very easy to follow and all your examples worked well. Seeing how effects and transitions work in jQuery was straight forward, although I probably would not use them in my projects. A lot of animations can be annoying for the user.

  

Chapter 12 – How to use Ajax, JSON and Flickr.

Page 376 – 377 Introduction to Ajax.

You gave a good discussion about the differences between a HTTP request and an XMLHttpRequest. It is important to understand that only data is returned.

Page 378 – 379 Common data formats for Ajax.

This was a useful discussion about HTML, XML and JSON.

Page 380 – 381 The members of the XMLHttpRequest object.

As I read through this I found it a bit heavy. Will need practice with this stuff.

Page 382 – 383 How to use the XMLHttpRequest object.

The file that you provided in the ‘ajax_html’ folder worked well in Firefox and Safari but not in the other browsers. It was a bit complicated reading through it, but I am sure that I could code this on my own if I needed to.

Page 384 – 385 How to use the jQuery shorthand methods for Ajax.

I can see that this will take some practice.

Page 386 – 387 How to use the load method to load HTML data.

Once again, the example you provided worked well in Firefox and Safari but not in the other browsers. I was impressed to see just how easy the code was compared to the other browsers.

Page 388 – 389 How to use the $.get or $.post method to load XML files.

I was surprised at just how easy the code was in this instance.

Page 390 – 391 How to use the $.get or $.post method to load JSON data.

As before, I was surprised at just how even simpler this code looks.

Page 392 – 393 How to send data with an Ajax request.

I found just reading through these pages was a chore.

Page 394 – 395 How to use the $.ajax method for working with Ajax.

Again, these two pages were a bit of a chore.

Page 396 – 397 How to use the $.ajax method to load data.

This program worked just like the earlier one, except for the timeout and the error message. 

Page 398 – 399 How to use the Ajax with Flickr.

I had not heard of Flickr but did not know just what it was. Now I know where to store my photos. It was fascinating finding out how to retrieve photos from Flickr using Ajax.

Page 400 – 401 How to display Flickr on a web page.

I am pleased to see that your example program worked well in all the browsers that I tried it with. The code was easy to follow.

Page 402 – 403 How to retrieve a feed from a website.

I am pleased to see that your example program worked well in all the browsers that I tried it with. The code was easy to follow.

Page 404 – 405 How to display descriptions from a Flickr photo feed.

This program also worked well. It was good to see the name, photo and description all come up correctly.

Page 406 – 407 How to search for photos by tags.

Again, your example worked well and the jQuery code was easy to follow.

Perspective

I was happy to see that all your examples worked well and I now feel confident that I can use jQuery to make Ajax requests that will return data to my web pages. It was pleasing to see that jQuery makes retrieving data really very simple.

Chapter 13 – How to use the API for Google Maps.

Page 412 – 413 Introduction to Google Maps.

The Google API reference certainly does look extensive.

I did not know about an API key!

I am glad you pointed out the samples and guides links as they made things easier to follow.

Page 414 – 417 The classes for adding a Google Map to a web page.

I found that just reading the text was a bit hard to follow, but thankfully your code for the example program worked well and was easy to understand.

Page 418 – 421 How to display markers on a map.

Once again, I found the text on pages 418 – 419 a bit hard to wade through. Looking at your example, I was glad to see that the program worked well. These programs are getting complicated.

Page 422 – 425 How to display messages on a map.

Once again, your example worked well. I am learning that the best way to understand the technology is to study the code.

Page 426 – 427 How to add custom messages to markers.

I have to say that I wonder who dreams this stuff up. As before the text on page 426 was hard to follow, but once again the examples worked well. You just have to follow the code as best you can.

Page 428 – 429 How to add Flickr images to messages.

The book example worked really well.

Page 430 – 433 How to display driving directions on a web page.

To put it mildly this really looked complicated. But again your examples worked well and I was really impressed with this stuff even though I am finding that getting the hang of the code is quite difficult.

Perspective.

I always knew that mapping technology was complicated. But I am impressed with way jQuery makes it much simpler. I was impressed that all the book examples worked very well and I am sure that I could use them in my own programs, even if some of the coding was a bit over my head.

Chapter 14 – How to use the HTML5 API’s.

Page 438 – 439 An Introduction to the HTML5 API’s.

I had heard about some of these API’s like Canvas and WebGL but I did not know what they were. After reading these pages, now know what they are and what they do.

Page 440 – 441 How to get information about HTML5 API’s.

I checked out all these websites and they seemed very comprehensive. I did not get time to go through them in any depth.

Page 442 – 443 How to use the Geolocation API.

Your first example did get close to my location.

Page 444 – 445 How to show users a location on a Google map.

Your second example on page 445 missed my location completely. By nearly 100 miles in fact. It placed me in the centre of Melbourne when in fact I live in Bendigo! That was in Firefox. Internet Explorer got it right! It did not work in safari or Opera.

Page 444 – 445 How to use Geolocation errors.

Maxthon browser could not detect my position.

Neither could Safari, Chrome or Opera.

Firefox developer edition put me in Melbourne.

Mozilla Firefox got it right.

Page 448 – 449 How to use the web storage API.

The hit counter program worked well on all browsers.

Page 450 – 451 How to use the web worker’s API.

Did not work in Chrome or Opera.

Page 452 – 453 How to use a web worker to retrieve data using AJAX.

I found the text in this program a bit hard to understand. I can see the point of using a web worker to load a very large file.

Page 454 – 463 An application that uses a web worker and web storage.

The example program worked well in Firefox but not in any of the other browsers. As I studied the various codes that were used, I noticed that the jQuery was not long or overly complicated.

Perspective

This chapter did provide a very good introduction to some of the API’s that are available. Obviously, this is a big subject in itself and will grow rapidly as the web develops. The book examples worked well and were not hard to follow although the last one only worked in Firefox.

Section 3 – jQuery Mobile

Chapter 15 – Get off to a fast start with jQuery Mobile.

Page 470 – 471 How to work with mobile devices.

These pages provided a good discussion about responsive web design and showed why it might be a better idea to develop a web page specifically for mobile phone websites.

Page 472 – 473 How to use a JavaScript plugin to redirect mobile browsers to a mobile website.

I visited the detectmobilebrowsers.com website. After following the instructions, it looks easy to set up for a mobile website. I feel that it ois better to create a website purely for mobile design, rather than use responsive web design.

Page 474 – 475 How to set the Viewport properties.

These pages provided a good discussion on the whole concept of the Viewport.

Page 476 – 477 Guidelines for designing mobile web pages.

Your guidelines were well laid out and were in interesting reading.

I did check out Proto Fluid.

Page 478 – 479 How to get started with jQuery Mobile.

These pages were a good discussion about jQuery Mobile.

Page 480 – 481 How to include jQuery Mobile in your web pages.

After reading through these pages, I came to the conclusion that it is better to just use the CDN.

Page 482 – 483 How to create one web page with jQuery Mobile.

This one-page program certainly scales quite well. It was interesting to read about “data-roles”.

Page 484 – 485 How to code multiple pages in a single HTML file.

Your example came up quite well. It was interesting to see how you coded everything into the one web page.

Page 486 – 487 How to use dialogs and transitions.

Your program again worked fine. I tried a few of the different transitions to see what they looked like and they all came up OK. They were all cool looking effects.

Page 488 – 489 How to create buttons.

Your program also looks good. I couldn’t help but be impressed with how easy jQuery makes the coding.

Page 490 – 491 How to create a Navigation Bar.

The Navigation bar came up easily in your example program. The hover worked fine and it looks very easy to code.

Page 492 – 495 How to use default styles and themes.

Your text shows that it is very easy to use theme “a” or theme “b” and how to code it to get the results you want.

Page 496 – 497 How to use the theme roller to roll your own themes.

I was very impressed with just how easy it is to change the class and the attributes of the various themes so that you don’t get stuck with just grey.

Page 498 – 503 A mobile website for Vecta Corp.

Going through the HTML for this website, it is easy to see how you pulled everything together from the previous topics. All worked well and also looked quite good in the browser.

Perspective.

I am now quite confident that I could use jQuery to build a basic HTML page without having to resort to responsive web design.

It will be interesting to see just what other features jQuery mobile has to offer.

Chapter 16 – How to enhance a jQuery Mobile website.

Page 508 – 509 How to use the jQuery Mobile website.

I visited the jQuery Mobile website and tried out many of the various demos and they all worked well. I did not have time to study them all.

Page 510 – 511 How to use jQuery mobile to format content.

Your example on page 511 came up well in my Firefox browser. But your text in the third paragraph seemed a bit confusing! For a three column grid you would use ui-grid-c not ui-grid-b?

Page 512 – 513 How to use collapsible content blocks.

Your program worked well in Firefox. The code is easy to understand.

Page 514 – 515 How to use collapsible sets.

Once again your example worked well. I am impressed with just how simple the code is.

Page 516 – 517 How to use jQuery Mobile for list views.

Both your examples worked well. The code that is used is very simple to understand.

Page 518 – 519 How to use the split button and inset lists.

Same as above. Not much difference between the two examples.

Page 520 – 521 How to use the list dividers and content bubbles.

Same as above. Not much difference between the two examples.

Page 522 – 523 How to use jQuery mobile for forms.

The text mentions that on page 522 that “when you type in the user tags on the text field that has the type ‘tel’, the numeric keypad is displayed as shown in the second web page in this figure.”

I did not notice the keypad show up.

Page 524 – 525 How to use the sliders and switches.

Your example work well and the code is easy to follow.

Page 526 – 527 How to use radio and checkboxes.

Again, your example work well and the code is easy to follow.

Page 528 – 529 How to use select menus.

It was interesting to see how you coded two separate list boxes in the one div in this example.

Page 530 – 531 How to submit a mobile form.

As above.

Page 532 – 537 An enhanced mobile website for Vecta Corp.

I am pleased to say that your final website worked well. Everything came together just nicely.

Perspective.

I have to say that I am glad that you covered jQuery mobile. Your examples came up nicely and I was impressed with just how much simpler that it is to use. I feel that it is a better option than responsive Web design and well worth learning.

Final Perspective.

Before one can use jQuery, one must understand HTML and CSS and have a certain working knowledge of JavaScript. But it is clear that having these functions built into jQuery will save any developer a lot of time and effort.

This book did a very good job of explaining jQuery. It certainly makes using JavaScript much simpler. I was very glad that you showed the reader how to use jQuery with things like Flickr, Google maps, JSON etc. It is clear to me that as the power of the web grows, then knowing how to deploy such technologies in web sites will become increasingly important for web developers.

I summing up, I will say that there is a lot to learn in JQuery but your book did a very good job of explaining the most important aspects of this technology. 

While I struggled to get around JavaScript in the past, it was great to see how easy the code was in most of your examples and how much it simplifies the whole JavaScript process. This will greatly simplify web development in the future while opening up the power of some exciting new technologies.

My deepest thanks for the folks at Murach for allowing me to study this great book. I can thoroughly recommend it to anyone who needs to get to grips with this exciting and fast moving technology.

Cheers

Gerard Gates