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:

• https://www.javascript.com/
• https://www.w3schools.com/js/default.asp
  • Start with  https://www.w3schools.com/js/js_intro.asp and then look through a few of the next pages in the list.
  • Also look at https://www.w3schools.com/js/js_examples.asp

There are hundreds-seriously-of tutorials for using JavaScript to create menus, tabs, accordions, etc. Here’s one:  https://www.elated.com/articles/javascript-tabs/ … 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.

• See a bit (explore for 10-20 minutes) what people can do with JavaScript
• XPLORE hundreds (thousands?)  of free scripts

LECTURE:  jQuery

Introducing jQuery & Libraries

UTILIZING 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.

jQUERY

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.

HELPFUL VIDEOS &  WEBSITES

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

• Get started with jQuery

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!

• https://www.woothemes.com/flexslider/
• https://www.jacklmoore.com/colorbox/guide/  (a beginner’s guide to using Colorbox)

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.’ —https://jqueryui.com/home

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 (https://whatis.techtarget.com/definition/code-minification-minify)

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.

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  ?