In Class 5, we introduce the Javascript “framework” known as JQuery. A Javascript framework is a fancy word for a bunch of Javascript functions that someone has written which make common Javascript coding tasks simpler to do and more efficient than they would otherwise be.
Why we use JQuery
Javascript itself is something of an unpleasant and inconsistent language for those people who know about such things. This makes it especially difficult for students to learn and for teachers to teach. JQuery and other Javascript frameworks are meant to address this issue. They attempt to add consistency and ease-of-use to an otherwise difficult language. So, although we have hardly touched the surface of beginning Javascript, I believe it is expedient to switch to the JQuery style of programming Javascript as soon as possible.
Read this post for an argument in favor of Javascript frameworks, and see this page for one example of trying to detect the width of an element on the page can be totally inconsistent and counterintuitive in Javascript.
One of the things we will be doing today is taking the same Javascript examples we created in Class 4, and showing how the exact same tasks can be accomplished using the JQuery framework, rather than the raw Javascript we have been using to date. So we will be achieving the same ends, but with slightly different means.
JQuery examples
Introducing the JQuery $() function
As you go through the JQuery examples below, I advise you to have this explanation of JQuery syntax open at the same time, so you can compare the code in the examples with a description of their intended use.
With that in mind, here are the basic examples of JQuery usage.
Using JQuery to handle events
- using JQuery to handle page load events
- using JQuery to handle click events
- using JQuery to handle mouseover events
- using JQuery to handle mouseout events
- using JQuery to handle form submission events
Using JQuery to change element styles
- using JQuery to change an individual CSS style of an element
- using JQuery to change an element’s CSS class names
- using JQuery to show and hide an element
Jquery effects
JQuery comes with some built-in effects and animations. With a small amount of code, you can make elements appear, disappear, fade in, fade out, slide up, slide down.
- here is a page exhibiting a variety of JQuery effects available for your use
- here is the official JQuery page outlining the available effects
Jquery user interface controls
Jquery also comes with some built-in user interface controls, known as JQuer UI. If you have a strong command of basic JQuery, everything in JQuery UI will be relatively easy to use with a minimal amount of code. These UI controls include the ability to add “drag and drop” functionality to your pages, to allow users to resize elements of your page by dragging them to new sizes. You can also use JQuery UI to make “Accordian” style expandable lists, date pickers for calendars, dialog boxes (modal dialogs), progress bars, sliders, and tabs.
JQuery assignment
For those of you who feel relatively confident in your ability to create page layouts using XHTML and CSS, and who were able to more-rather-than-less grasp the concepts we encountered in our experience with Javascript so far, this assignment is for you.
This is an advanced assignment
If you are not yet satisfied with your progress in XHTML and CSS, I encourage you to NOT try to create the Javascript code for this assignment. Rather, I would prefer you to focus on perfecting your XHTML, CSS skills to create the basic layout of this page. Once that is complete and you think you may be able to create XHTML and CSS layouts for just about any page design I throw at you, only then should you begin to think seriously about writing the Javascript code necessary for this assignment. XHTML and CSS are the foundation upon which all web development rests.
With that illustrious introduction, here is the assignment.
Related posts:
- Class 6 – Assignment: create a Tic-Tac-Toe game using JQuery
- Clas 6 – Deconstructing JQuery Syntax
- Class 6 – Recap of JQuery Examples
- Class 6 – Some Useful JQuery Plugins
- Class 6 – Including JQuery into your own projects