Murach’s jQuery
2nd 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 2nd 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
No comments:
Post a Comment