Transcript Intro to jQuery

Introduction to jQuery
Learning Objectives
By the end of this lecture, you should be able to:
– Describe what is meant by a software library- particularly as it applies to
JavaScript
– Describe the need for libraries as applied to the issue of cross-browser
compatibility
– Describe the role played by jQuery
– Install/Configure jQuery to run on your web pages
– Become familiar with a page containing everything you need to get
started with jQuery that integrates CSS (internal and external), CSS
classes, standard JS function, and the jQuery ‘ready()’ function.
Rinse, Lather, Repeat, Repeat, Repeat
•
•
•
All programmers eventually observe that certain types of tasks/requirements
have a habit of appearing over and over again.
As an example relating to web design, a common task encountered is to
ensure that a specific type of functionality works consistently regardless of
which browser the visitor happens to be using.
In fact, this particular task is one of the thorniest issues in web design.
– The issue is even more pronounced in recent years now that so many people do their web
surfing using handheld devices.
•
•
Skilled JavaScript programmers have made lots of $$$ using JS to help deal
with this issue. For example, one can write code to check to see what type of
browser the visitor is using, check for the size of their browser window, and
then adjust the dimensions of images on their web page accordingly.
The code to accomplish a task such as is likely to be:
– Tedious
– Lengthy
– Error-prone
•
To further complicate things, suppose that down the road, a new uber-popular
browser gets introduced. Suddenly, your JS code that has tweaked for hours
and hours to achieve a certain look based on all the “major” browsers in the
past, no longer works for this new, trendy browser.
Software Libraries
•
•
Software Library: A software library is a collection of code. A JavaScript library
is typically a file or collection of files each of which has a bunch JS functions.
These files have (usually) been widely tested and finessed to tackle some
commonly encountered problems/issues in web page design.
Public Domain: These libraries are often in the public domain which means
that they are intended (typically) to be free. One of the major benefits to this
system, is that there is typically an entire community behind these ventures
that is forever adding, modifying, improving the libraries’ code as needed. This
means that if some new browser suddenly appears on the scene and becomes
insanely popular, it’s only a matter of time before the community will jump in
and update the library to deal with issues encountered by the newcomer.
– This is very similar to the philosophy behind Wikipedia (and in fact, any ‘wiki’) with which
many of you are familiar.
•
There are several JS libraries out there including:
–
–
–
–
•
Dojo
Prototype
jsPHP
And…….. jQuery
If you wish to use any of these libraries, you can easily download and/or link to
any of these libraries in your web pages.
Enter jQuery!
• Each JS library has its own advantages and disadvantages. Some of the
reasons that jQuery has become so popular (and why we have chosen it for
this course) include:
– Small size: Every time a user visits your page, along with the HTML file, CSS file(s), images
and so on that will be needed to be downloaded to their browser, they will also need to
download the library. Some versions of the jQuery library are less than 10 k!
– Popular: We’re not taking popular in the high-school sense of the word. When it comes to a
software library, popular is good since it means that there is a large and active community
constantly testing, updating, and improving the code.
• Tested: Because of the widespread use of jQuery, bugs and other limitations are quickly revealed
and fixed.
• Plug-Ins: These are small add in programs that typically have some highly specialized use. The
large jQuery community has resulted in the development of thousands of plug ins. As an example,
the little calendar that pops up when you visit some sites and click on a date would take quite a bit
of JS progrmaming. However a single line of jQuery code linking to the ‘Datepicker’ plug in would
accomplish the same thing!
– Free: jQuery is free. Some libraries are developed by commercial software design firms and
therefore do cost money. Professionally written and maintained code does of course have
its own set of advantages, but again, you (literally) pay for it.
Running jQuery
•
jQuery exists as a single external JS file. You can run jQuery one of two ways:
–
–
•
Each option has its pros and cons
–
–
–
•
Download the file to your computer
Link to a remotely hosted version from a reliable and established website
Download: The main benefit is that if you are offline, the file will still be there on your computer when you are
developing your code.
Link: These externally linked files are typically the most up to date. However, it requires that you are online,
and also takes a few extra milliseconds which can, in theory, slow down your site a little bit. Still, once your
page goes ‘live’, you should use the version linking to an external file.
Here is a link to an article discussing these issues in more detail.
I would recommend using the externally linked version.
–
There are many different servers from reputable companys such as Microsoft, Google, jQuery and others. You
can easily find links to these online. Here is the link to the latest (as of April 2015) version on Google’s site.
<script src= "http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
•
–
–
–
Remember that this link must go in the ‘head’ section of your HTML file.
Note that the closing </script> tag IS required.
Notice that this link refers to version 2.1.3. If you encounter links to later versions of jQuery, by all means, use
the latest version!
–
–
–
This link must be present on every page in which you use jQuery commands.
Not surprisingly, this link must appear before any jQuery commands you use.
You must be online for this link to work. If you are doing some coding work in an offline environment you will have to download
the jQuery library to your computer and link to it locally.
IMPORTANT: Links to CSS stylesheets (whether external or internal) must be placed BEFORE Any
Javascript programming, including jQuery.
The ‘ready()’ function
•
•
Okay, let’s get started with our first jQuery function!
We will begin with a function called ‘ready()’, or more specifically, document.ready()
•
•
The ‘ready’ function executes after the entire web page has finished loading in the visitor’s browser. This is a very
important function to be comfortable with since much of what we do in real world JS involves modifying content that
has already been loaded and made visible to the user on the page. As a result, you will typically include this function
on every page in which you are using jQuery.
<script>
$(document).ready(
function()
{
// Some jQuery code will
// go in here...
}
);
</script>
I am *well* aware that this is some awkward looking code, but, never fear, all will be
explained in time!
STUDY AND PRACTICE!
•
•
See the file: first_jquery.htm
As always, study the file closely. Be sure you clearly understand everything
that is in the document
•
•
I don’t expect you to completely understand the ready() function just yet. While I’m sure
many of you can see what that line is intended to do, don’t worry if you can’t. We’ll cover it in
our next lecture.
Don’t be passive - TYPE THE CODE OUT FOR YOURSELF!!!
– It’s important not to study “passively”. This means actually typing out the code yourself. Once
you’ve typed it out without errors and confirmed that it works, you can – and should – modify
and experiment with the code.
•
Your objective is to put everything we’ve done so far together:
•
•
•
•
•
•
•
•
•
•
HTML Comments
JS Comments
Order (CSS before scripts), Link to jQuery file before any actual jQuery code, etc
Use of div sections
Use of ID attributes
CSS classes
External and Internal (aka embedded) CSS
JS functions
Linking a button to a JS function
Syntax of the jQuery ready() function