jQuery Tutorial - 5 - Inline/External Scripting Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
with a video tutorial for the new Boston
in the last video we looked at testing
jQuery once we've included it into our
page using our script tag and we looked
at an example that included a paragraph
with an on click event
attribute now the difference between
inline and external coding is extremely
important the main difference is that we
well the main goal is to keep our
JavaScript as separate from our HTML as
possible so how do we solve something
like not using this here but instead
just having a paragraph on its own now
the one thing to look for is well in the
example that I used in the future
tutorials back I included another
JavaScript file into my page that
allowed me to use this functionality so
the difference between inline and
external is that we don't actually have
any code inside of our tags but we can
still use the same functionality so
let's go ahead and create a new file I'm
going to leave this blank for now but
inside of our GIS folder I'm going to
call this hide dot j/s now inside of
hide Jas I'm going to include some
functionality the same as we did in the
last example that actually allows us to
hide this paragraph when we click on it
but we're not going to include any code
on the paragraph instead what we're
going to do is reference the paragraph
as opposed to include this code in here
so the first thing we need to do is give
an ID to this paragraph and this will
allow us to uniquely identify the
paragraph so I'm just going to call this
paragraph now now that we have an ID we
can use paragraph inside hide is to
actually reference this but before hand
we need to actually include this hide is
file under here which will allow us to
use the font
allottee within it so I'm going to say
script type is equal to and I'm just
going to end that tag the type is text
forward slash JavaScript exactly the
same and the source is J s /hi J s so
now we've included this hi J s file we
can start to write the code within it
and check for when the user is actually
clicked on this paragraph so let's go
ahead to hide is what we're going to do
is we're going to use the same notation
so a dollar sign inside we're going to
reference remember before we used this
to reference it inside we're going to
reference it with the hash and that's
power graph we're then going to say dot
click and in brackets and then inside of
here we need to create a function now
don't worry too much if you are actually
on or you're unsure of the syntax or
unsure of the method method that I'm
using this is just an example to
demonstrate the difference between
inline and external code so we're going
to be looking at this click event
handler a bit later on so if you're
unsure as of yet then continue watching
and you'll understand it a bit later on
in the series so inside of click we need
to create a function and we need to
write our block out here which we're
just going to pull down so inside of
here is our code that happens when we
actually click this paragraph so when
the user clicks this paragraph it will
be identified by paragraph it will be
picked up in high GS here so when the
user clicks and we carry out this
function and this function will be hash
sorry hash paragraph dot hide ok so now
when the user clicks on this paragraph
it will hide it this is essentially what
is happening here so let's go back to
our page and refresh you'll see that
we've got the paragraph here however we
don't have any inline
javascript at all we just use this hide
is to look for a click and that jet high
das file is included under here so let's
go ahead and click the paragraph and see
what happens
well now the paragraph has been hidden
and we know it's been hidden because we
included the same functionality in hide
is as we essentially or previously did
inside parable inside the paragraph tag
so now you can see that using jQuery is
extremely easy to stop in line writing
of code and instead use an external file
that checks for event handlers now as I
said if you don't quite understand the
code that's not a problem the main point
of this tutorial was to demonstrate the
difference between inline and external
and we've now actually eliminated the
need for into inline coding so
throughout the tutorial series we're not
going to be using inline coding
everything's going to be done from
external files and the reason for this
is that it's best practice to keep
everything external and keep JavaScript
away from HTML