JavaScript and jQuery Tutorial (for Freshmen)

by birtanpublished on July 3, 2020

hello everyone welcome to an

introduction to JavaScript with jQuery

this video is intended for anyone who's

interested in learning about web design

and front-end web development perhaps

you're already familiar with HTML and

CSS but it feels like there's something

missing from your pages and applications

well you're absolutely correct what's

missing is JavaScript and in this video

we are going to learn the role that

JavaScript plays in front-end web

development and we'll also take a look

at how to write our own code using

jQuery to add JavaScript functionality

to our pages so let's dive right in in

front of you is a sample page that I've

created and really quickly I want to

dissect the different technologies that

make this page possible so for example

we know that hTML is involved hTML is

how we include our content on the page

and define that content it's how we say

that this bit of text should be heading

and this bit of text should be a

paragraph we know that CSS is involved

CSS is how we give this box a background

color and this colored border and a

precise font size and weight so in a

word CSS is style but there's something

else at play on this page so for example

if we click this X that's attached to

the box the Box disappears if we scroll

down a bit and click on one of these

frequently asked questions we see that

an answer slides down so that's not

content and it's not style its behavior

and JavaScript is how we add behavior to

our pages javascript is how we make our

pages and applications come alive it's

the glue that holds everything together

and it's the magic that lets us

manipulate anything we want at any

moment so let's get a little bit more

specific before we dive straight into

the code here are the four primary

things that we use JavaScript for number

one event handling this basically means

that at a certain moment we want

something specific to happen the event

could be anything

perhaps it's on the initial page load

perhaps it's when the page gets resized

maybe it's when the user taps or click

something or when the user swipes

something or when the user Scrolls to a

certain point on the page any event you

can imagine with JavaScript we can

capture the moment that that event takes

place and then run certain code number

two Dom traversal that phrase likely

doesn't make sense if you're new to

JavaScript so here's a quick breakdown

we know that the word traversal just

means traveling or navigating your way

around and the phrase Dom stands for

document object model now discussing the

Dom could take 30 40 hours if we're

talking about really understanding it in

detail so here's a really quick

unscientific explanation of the Dom in

HTML we can think of the elements almost

as Russian stacking dolls the way that a

paragraph nests inside a list item which

nests inside an unordered list which

nests inside an article so on and so

forth

well the Dom is basically that times a

thousand or 10,000 think of a room in a

house and a hoarder lives in that room

and they have a hundred thousand

different sets of Russian stacking dolls

the Dom is basically the family tree in

a line graph documenting all those

Russian stacking doll families and all

of their details and abilities basically

the Dom is everything that the browser

is capable of and it's currently

rendering and it's just sort of the

totality of the web browser that still

isn't very helpful at the moment but

just know that javascript lets us move

around the DOM and do all sorts of neat

things huh so moving on number three is

Dom manipulation so if we know that the

Dom is sort of this giant family tree of

everything on the page and everything

the browser can do you can imagine how

useful it is to be able to manipulate

that family tree to manipulate the DOM

and JavaScript makes it possible

number four is ajax ajax basically means

anytime you send or receive data without

refreshing the page it's as simple as

that

so javascript and especially jquery make

all four of these things very simple so

let's take a look at the code and dive

right in now in front of you are two

windows on the Left we see a text editor

with the code that creates the sample

web page that we looked at a few minutes

go and on the right is a web browser

showing that sample page so in this tab

we can see the JavaScript is in play you

can close the different modules and

toggle down different answers and

questions but in this tab I've removed

the JavaScript this is only HTML and CSS

we're going to rewrite the JavaScript

together to add that functionality back

in from scratch so let's get started so

let's take a look at our HTML code you

can see that with this line we are

including a CSS file which is right here

and in this file we're defining things

like font family and padding amounts and

colors and we can see that right below

this line to include the CSS file we're

also including a couple JavaScript files

now you don't need to worry about

memorizing this syntax I will include a

link to the source code after this video

so you can copy and paste or learn at

your own speed but just know that in a

similar fashion to attaching a CSS file

to a page we are attaching JavaScript

files to the page so in this file script

j/s we can include any JavaScript you

want and it will run when the page is

loaded so just as a proof-of-concept

just to prove that all the files are

lined up we can write alert hello world

and when we refresh the page we see that

there is an alert okay so now that

everything's plugged in and working

correctly our first task is to add the X

to this yellow box so that it will close

on click now before we worry about it

writing the actual JavaScript let's make

sure we have the X in place visually so

we're gonna head over to our HTML find

the corresponding div for this yellow

box here it is UI message and let's add

a class for the actual X button so we

could name this anything we want but

I've named it ui clothes put an X inside

it close the span and let's remove this

hello world message so now if we refresh

we see that the X is there and if we

hover it over it it gets dark

this just corresponds with a little bit

of CSS that we have basically giving it

wrong color and a little bit of padding

but this is a lesson on JavaScript so

now that we have our X how do we make it

so when you click on it it does

something so let's head over to our

script file and write our first bit of

jQuery I'll explain this code in just

one moment okay

jQuery is the world's most popular

JavaScript library you can think of a

library as a giant set of shortcuts and

tools that make writing JavaScript a lot

easier so inside this bracket and this

bracket we can write anything we want

and jQuery will help make it happen so

to show you just how simple it is to

write jQuery it's a two-step process

number one you select an element or a

series of elements and number two you

act on it so for example we want to

select this X button so we write UI

close and again this is using CSS syntax

to select the element so it couldn't be

easier we know that a period corresponds

with classes and then we just include

the name of the class and then we want

to act on that element so we chain a

method so we'll say hide now this isn't

what we want for the actual

functionality but it's a good proof of

concept so when i refresh the page we

see that it's gone and we can use any

method we want here we could say fade

out and when we refresh we see that it

fades out or we could say slide up and

it will slide up so what we don't want

any of that though we want to use event

handling we want to write code so that

when you click on this X the entire

yellow box disappears and we're going to

traverse the Dom to make that possible

but first let's focus on a bit of event

handling the event that we want to hone

in on is when this X button is clicked

so we'll write jQuery UI close when it

is clicked we want to run a bit of code

again don't worry about memorizing this

syntax perfectly right now I will

include a link to the source code after

the video but just to know that any code

we include in

these brackets will run when this gets

clicked so for example we could say

alert hello and when the X button is

clicked we see that pops up so what we

want to write here is code that will

hide the entire yellow box and remember

if we hop over to our HTML the entire

box has a class of UI message so we can

write the jQuery UI message hide and if

we click the X now we see that it's gone

however that hid every yellow box on the

page not just the one that we clicked on

so this is where Dom traversal comes

into play

remember the set of Russian stacking

dolls we need to do a bit of hopping

around all those different different

sets to select just the particular

yellow box that we want so let's erase

this line and before we write our new

code let's just discuss the logic that

we want to use we want to hone in on the

specific X being clicked and then move

up its set of ancestors to find its

particular surrounding box so basically

we're gonna hone in on this specific

span and then we want to move up the Dom

tree a level to find the closest div

named UI message so the code that will

write looks something like this

and if we refresh we'll see that when I

click this it fades out just that yellow

box so let's dissect this line we're

saying this this is a keyword in

JavaScript and in jQuery that refers to

the object that we're running the method

on so we're running the method click the

event handler for this UI close element

so when we say this it's referring to

the specific element that got clicked on

and then we're saying from that element

look for its parents and look for an

element with a class of UI message and

then fade it out so that's the series of

events that takes place and that's an

example of a handling an event the click

event and be traversing the Dom we found

the element when you jumped up to its

parents so on and so forth let's show a

quick example of manipulating the Dom so

for example we notice that this X button

is only displaying on this first yellow

box and it's not on the second or third

yellow box that's because we only added

it manually in the HTML to the first UI

message div so let's actually add it

dynamically to all of the boxes with

JavaScript so I'm gonna remove this from

my HTML so if we refresh we see that

it's gone so now let's hop over to our

javascript file and we want to select

the yellow boxes and remember they have

a class of UI message and we'll use this

neat jQuery method called append and

we'll paste in the code that we used to

have in our HTML and when we refresh we

see that now we've manipulated the Dom

the giant family tree of Russian

stacking dolls we've used javascript to

insert a bit of HTML markup and the

exact places that we wanted it and when

we click it only closes the box that we

wanted it to close so this is a good

example now of event handling traversing

the Dom manipulation the Dom hopefully

things are starting to click a little

bit you're starting to see how useful

JavaScript

and Jake we really are but practice

makes perfect so let's try another quick

example let's give this frequently asked

questions section a bit of attention so

what do we want to do basically we want

to hide all of the answers so that on

page load we only show the questions and

then a user would tap or click on one of

the questions to see the desired answer

so if we hop over back to our completed

version the cheat sheet here it is in

action you click on one you can click

again to toggle it now you're interested

maybe in this question okay so it's

pretty simple

back to our version where we need to

write the JavaScript so let's get

started our first bit of business would

be to hide the answers initially so

we'll hop over to our JavaScript file

let's actually clean this file up a

little bit let's add inline comments a

little bit of documentation so we start

with two slashes and then we can say you

know this line was for adding the X

button and this code was handling the

click event get rid of get rid of a

little bit of extra whitespace

okay and we'll add a new comment and

we'll call it initially hide the answers

for the frequently asked questions

section okay so basically let's hop over

to our HTML and we scroll down a little

bit and we see that each question and

answer consists of a heading level 4

with the question and then a div with a

class of answer so it's really simple we

just want to select the class of answer

and hide it so if we refresh we see that

now only the questions are displaying so

now we just need to write some code that

handles the event of clicking on one of

these headings so we'll write a new line

we'll start with a comment handling the

fat question click ok so we'll select

the question if we look at our HTML we

see that we have this parent class of

FAQ and then each question is just an h4

element so we'll say FAQ age

or descendant selector it's that easy to

select it and then we'll say on click so

on click we want to think of the Russian

stacking doll example again the Dom on

click we want to move to the nearest

following div with a class of answer so

you want to act on that particular bit

of content so we will say this move to

the next an element that has a class of

answer and then slide it down so when I

click on this we see that it slides down

when I click on this one it's answer

slides down now watch this instead of

slide down if you say if you say slide

toggle jQuery will automatically know

that when you click it a second time it

should slide back up so jQuery has a lot

of neat little shortcuts like that for

you now let's go the extra mile and

style these headings so that they

actually look like something that can be

clicked instead of just plain text now

if a user has javascript disabled

obviously we don't want these to look

like links we want them to just look

like plain text like this but if this

file is running then JavaScript is

obviously enabled so we're gonna write a

new line of code and we'll just say back

h4 add class this will just add a class

um back question so if we refresh we see

that they're now blue and they use the

hand icon when I hover this is

corresponding with this class in our CSS

file fat question we're just giving it a

color of blue and using the pointer for

the cursor and that wraps up the

frequently asked questions section now

let's talk about the big picture of

JavaScript we mentioned that there were

four primary uses we've covered number

one how to handle events we've covered

number two how to traverse the Dom we've

covered number three how to manipulate

the Dom and you'll remember that number

four was this general idea of sending

and/or receiving data without refreshing

the page without a hard page reload well

that's the one

topic that we haven't covered so far so

let's dive right in you can see that if

you click this learn more box it takes

you to an entirely separate page and if

we look at our file structure you can

see that index was the file that we've

been working with and about is this

entirely separate page so let's imagine

a scenario where we want to load in this

content dynamically on the fly into this

area on click when you click learn more

we want to pull that content in let's

imagine that maybe this image of the bee

is a really large graphic file so it's a

large file size and we don't want to

load it unless a user actually clicks to

read more so we want to pull it in on

the fly so let's start writing the code

to make that possible so we'll begin by

targeting the click event for this learn

more link so if we hop over to our HTML

we see that there is a a element with an

ID of about so let's start writing our

JavaScript give a comment say

dynamically load about content okay so

when that about link gets clicked that's

the event we're targeting we want to run

a bit of code we want to target this div

with a class of about placeholder so if

you see in our markup we have a div with

a class of about placeholder we want to

insert the code that we want dynamically

into this element on the fly so we're

targeting about placeholder and we're

going to use jQuery load method we're

gonna go into this about HTML file let's

pull it up really quickly this is a new

HTML file from the one we've been

working with let me show it to you in

the browser and let's imagine that we

only want this content from this page we

don't want any of this content so in

this new page about dot HTML we scroll

down and we find that this is what we

want this div with a class of body text

so back to our JavaScript we're loading

using this load method we're loading

this file and then we're gonna say body

text

so we're going inside a specific file

then we're only taking the element that

we want and then finally because

javascript is enabled when someone

clicks this link we don't want to follow

the link URL we're just using it for the

click event so we'll say return false so

now if we refresh the page and we click

on learn more it dynamically loads the

content into the Dom of the current page

so not only did we manipulate the Dom or

a giant set of Russian stacking dolls we

pulled in data from another source on

the fly without a page reload or a page

refresh only javascript can do that and

that's going to conclude this

introductory video to JavaScript with

jQuery let's review what we've learned

we've learned the role of JavaScript

plays hTML is for content CSS controls

the styling and appearance and

JavaScript controls the behavior now

obviously there are a lot more than four

uses for JavaScript but we think of the

big four as event handling Dom traversal

Dom manipulation and sending/receiving

data without page refreshes now

obviously there's a lot more that you

can do with javascript we only scratched

maybe 1 to 2 percent of its surface if

you can imagine it and it takes place on

the web browser it can likely be done

with JavaScript the point of this lesson

was just to inform you of some of the

basic concepts that sort of drive

everything and provide you with a bit of

basic vocabulary to help you learn more

advanced JavaScript techniques from here

the sky's the limit

you just need to learn a little bit more

and create whatever you want to create

so thank you very much for watching I

hope you feel like you learn something

and stay tuned for more web development

tutorials thanks bye

Related Videos

Be the first to comment “JavaScript and jQuery Tutorial (for Freshmen)”

Your email address will not be published.

There are no comments yet.