javascript and jQuery logos
  • Gain exposure to libraries of ready-made scripts for your use.
  • See and test a few such widgets/scripts.
  • Understand what elements need to be included in your HTML document, and in your uploaded support materials.


Please plan on spending one hour each day (at a minimum) to complete this module. You should be able to do the work in approximately 12 hours. Break it up; plan accordingly.

Reading, Watching, Testing


How far are we through the course?


430/500 points possible

Week 13: JavaScript or jQuery

You’re working with libraries of information. You do not need to recreate the wheel or write code from scratch, but you need to know how to (and where to) include code.

LECTURE: JavaScript

VIEW  javascript videos from Khan Academy –  Let’s start with  what is a JavaScript library?  Please spend 20-40 minutes reviewing this page.

Two of the best resources for getting started with javascript are:

There are hundreds-seriously-of tutorials for using JavaScript to create menus, tabs, accordions, etc. Here’s one: … but while turning off JavaScript is not such a hot topic as it used to be you should be aware that people do it, and that may mean your awesome display disappears. YOU HAVE to have your content display well without all the bells and whistles.


LECTURE:  jQuery

Introducing jQuery & Libraries


  • There is no need to recreate the wheel, especially when others have already made excellent resources.
  • Look for materials that have a large user base and a considerable amount of help available
    • I tend to do a bit of searching on the product site and then go look on YouTube for what types of videos people are publishing on how to use that product
  • A library is a premade product that you either link out to at another source, or download and then upload to your own server–linking to it on your server.


The user interface or user experience is often the most important element of your web design AFTER the content.

  • jQuery was formed by javascript programmers as a collection of freely available user interface functions for anyone’s use.
  • By installing jQuery you gain access to functions that perform common or simplify complicated tasks.
  • jQuery is one of many libraries that organize and simplify web page (or application) development.

Once you understand more about jQuery, how to import the library and call functions, you may be inspired to learn about other libraries.


Khan Academy: Meet John Resig, the developer that invented jQuery and now works as an engineer at Khan Academy.

Here are a few resources, but understand that you will be trying it (and just might have to toss it out). You are not limited to the follow two items. They are only suggestions.

Absolutely watch the above… it will explain how javascript libraries get included, how jQuery works, and how to use it in a web page!

adding jQuery to your site

I in no way expect you to become a programmer. I do want you to have some exposure to the amazing things being done with code in web pages. Of course, you know — you’ve been using a lot of it. But what does it look like? So, consider this exposure. It is not for developing expertise.

jQuery UI

jQuery UI  provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.’ —

jQuery UI, stands for user interface, is a powerful collection of functions. They build upon the jQuery library, in other words, jQuery is much larger than what we are studying. You will see materials all over the web that are built by using jQuery. You are just beginning to touch the surface. That being said, the jQuery UI covers a lot of what the first time ‘script-kiddie’ would like to impact: color, layout, design, usability, functionality.

By using a library like jQuery UI, you shorten your development time, you are using existing code instead of trying to write it all yourself. You are using code that has been tested by thousands of people. You are using code that has great support resources in the way of how-tos and videos.

We are primarily focusing on widgets. A few widgets are: accordion (see more below), autocomplete, button, datepicker, dialog, progressbar, slider, and tabs.

One of the first things you need to do if your work doesn’t look the way you anticipate is check how you have linked in the library. Then check that the .js files you downloaded from jQuery’s website were all uploaded to your site. After that I would recommend printing out your code and comparing it to the code provided. The most notorious problems are missing semi-colons! Use a highlighter or a pencil and find them all! Save your work in a new document (keep your old work.) Begin again. At some point you may need, tea, coffee, a soda, a walk around your apartment building… it’s okay, your code will wait.

What is min (mini or minify or minified) — when you are pulling the jQuery library you may see .min (

Try  using jQuery accordion, buttons or tabs but you may want to do something else that is just as “spiffy’ and clean — such as install a gallery of images.

Screen Shot 2014-07-22 at 10.57.44 AM

On the jQuery website linked above you can follow examples of the different widgets AND you can see the source. So, given that you’ve had 7  weeks of time to work with html and css the idea of linking to a library (javascript file) may be a bit daunting, but it is in line with what you should be capable of doing by this point. You currently link to css files, and some of you also have tested linking to different sources to use web fonts.  This is similar.


You need to determine what you’d like to use, and then carefully read up on the steps to download the most recent jQuery library. You will then upload that library to your webspace and link to it there.

  • Want a sample to work from? Send me email and quote this line from this week’s page and I’ll send you a sample to get you started. Please email before 5p on Friday.
  • More? View a  quick tutorial about jQuery  ?

JavaScript & WordPress

PRACTICE with either two  JavaScript or jQuery widgets – 25 points  
on the same page demonstrate your ability to use web safe fonts. Google fonts were covered earlier, you can learn more about web-safe fonts at  among MANY other places! Do you think ALL Google fonts are web safe? Read this:

For this assignment, if you are unable to get everything working by loading jQuery’s files into your web space, feel free to point at the Google Hosted version