jQuery Tutorial - 3 - Implementing jQuery Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' org
with a video tutorial for the new Boston
in this tutorial we're going to look at
implementing jQuery into a page and just
testing if it actually works or not so
one of the things that we need to do
first of all is go over to the jQuery
comm home page and you'll see here that
we can actually download jQuery now
there's a production and a development
version and you're going to need to
choose the production version the
development version you'll notice is
slightly larger it's 2 to 9 KB and this
is uncompressed code now the reason for
this development version is if you are
developing plugins and eat access to the
uncompressed code for jQuery however the
production version is only 31 kilobytes
and is minified and gzipped now let's
take a look at the difference between
them quickly you'll see that the
uncompressed code just looks like normal
JavaScript a large large file as as you
would expect from a 2 to 9 KB file let's
go and look at the production version
you can see that it's still long but it
has been compressed to create a shorter
file size so once you have the
production version selected go ahead and
download you jQuery it should open up in
your browser as code what you're going
to want to do is select the entire page
and copy it to your clipboard copy now
we want to come over to your text editor
and before we paste it into a file we'll
just have a look at our directory
structure before we continue now when I
write any JavaScript code I keep it in a
file called Jas index dot PHP is the
file that we've got currently open here
and Jas is where I would keep all of my
JavaScript files so let's just look in
JavaScript you can see that I've created
a file called jQuery gar so I've given
it a Jas extension and that's the far
we've also got open in
our text editor so essentially what I'm
going to do is I'm going to copy and
paste the code from jQuery and I'm gonna
paste it into this jQuery j/s file let's
go back again
now inside index dot PHP and I'm going
to include this jQuery file that is
found in the J's folder so that's
essentially the directory structure
we're going to be keeping and where we
place jQuery in order to include it into
our page so like I said I've got this
jQuery J's file open in the J's folder
and I'm just going to paste the code
that I retrieved from the jQuery comm
website now I'm going while I've saved
out and I need to come over to index dot
PHP in order to include it into my page
so how do we include it well usually
when you're writing code JavaScript code
you would start in your head and you
would do something like script type is
equal to text forward slash JavaScript
so we've got the type attribute in the
script tag and then we would come down
and we would end our script and we would
write our JavaScript code in here now
because jQuery is a 31 KB file and we
need the body of the document to load
before we actually use things like event
event handling you'll notice in the last
example I showed you with the hide and
show button we actually need to allow
every element in our page to be able to
load before we actually start to check
for elements so we're not going to be
writing any code or including any files
in the head part of our document we're
gonna be doing it at the very end of our
body so let's go ahead and type script
type equals text forward slash
JavaScript and let's go ahead and end
that script there now usually you would
write your code in here however what
we're doing is we're including this just
because we don't want to paste our code
into our document so it would work if
you were to paste the jQuery
file into this document let's just wait
for that to load
okay so I've just managed to get rid of
that because the file size of that
crashed my browser so the example didn't
really work however my point is that we
could write our JavaScript code inside
of here however what we're doing is
we're just simply starting this script
tag and ending it but we're supplying
the source attribute so we can say J s
/j query J s now because we've pasted
our jQuery code in here this is now
available to use in this document we can
write all of our code up here and we'll
still have use of the jQuery library so
now what we want to do now that we've
included jQuery into our page is
actually testing whether it works so in
the next video we're going to be short
creating some short inline jQuery which
is highly discouraged just so we can
test the functionality of jQuery and see
if it's worked by including it by this
method you'll often find that if you
were to include jQuery and you did it
you didn't do it properly you'll have no
control or use of jQuery at all so
extremely it's extremely important if we
just create a simple inline test just to
see if it's worked now if you're not
sure of the difference or the
similarities or you know the rights or
wrongs of inline or external JavaScript
then this will be explained in another
video and you'll be able to understand
why it's not so good to use inline
JavaScript or jQuery now if you remember
the example we looked at a couple of
videos back you'll notice that I was
using external javascript and there was
no actual JavaScript present within my
button or the paragraph that I you that
I was actually hiding and showing so
we'll look at that in another video
however in the next video we'll look at
a quick example to see if jQuery is
working on our page