Transcripts
1. Introduction: Hello and welcome to this
course on DOM manipulation. My name is Taylor English. I will be your instructor
for the course, and I'm very excited for this. I've made this course
so that you can easily understand the DOM
manipulation so that you can have
fun changing CSS, making buttons, do things, creating elements
programmatically. That's what this course is for. And I've made it easy to
understand for beginners. And experienced
people will like, I'm sure that you'll enjoy it. Now I want to go over what
we're going to talk about. But before I do that, I want to tell you
guys about where to find more videos like this. In other classes, you can
watch free videos on computer, tips and tricks and
solving issues, as well as some programming
at my YouTube channel, which is youtube.com slash C plus hacker, all spelled out. There's lots of great
tutorials there. I've got a Skillshare
class that you can watch called angular
11 for beginners, which is actually
also applicable to Angular 12, I believe. But it's about
learning components, routing services, all
of these great things. I think that you
might really enjoy it if you enjoy this course. And you can find
that at this link, I will try to put this in the description of this
class, this video. That's just a little
bit about me. I am a university student
studying computer science. There's perhaps some credibility
for you, but honestly, I just really love
teaching this and that's why I want to share it. So this class, what
we're going to be going over is five basic things. First, I'm going to show you
how to set up your files. This is not really part
of DOM manipulation, but it does include some
important aspects of it, like linking your files correctly for your
JavaScript and CSS. Then we'll go, we'll jump
into selecting elements, grabbing the HTML, and so that
we can do things with it, saving it into variables. Then I'll talk about
creating elements programmatically
so you can create them and append them
to certain parts of the page via JavaScript. Then we'll go into
manipulating elements with CSS and things like that. So you can change the
color of your page. You can do all sorts of
things via the JavaScript. And finally, we will talk
about buttons and how you can click a button and run
functions if statements loops. We're going to go into
some detail on that stuff. So I hope you guys enjoy this. It's gonna be really fun. And I'll see you
in the next video.
2. Setting up your Environment: All right, it's time to get started with our first lesson. So before we actually dive
into DOM manipulation, we're just going to start
by setting up our files, simple HTML, JavaScript,
and CSS files. So let's go ahead and do that. You'll want to create
a folder where you can work on this project. I've called mine
DOM manipulation. You can call yours
whatever you'd like. I'm going to be
working in VS Code, which I highly recommend. Let's create a file and
we'll call this index.html. Now, let's start. Let's save that.
Create our HTML tags. Inside that we
want our head tag, and within that we
want our title tag. I'm just going to
say Dom relation. Now below the head tag you'll
want to put a body tag. That's not what I meant. Okay. Within the body tag,
we can just say, let's put a paragraph
tag and say hello world. Now let's create a
JavaScript and CSS file that we will start using in
the next couple of videos. We're going to call
this one app.js. To make sure this one's working. I'm going to do
console.log. Hello World. Again. Now to link that up
below the body tag, we're going to put a
script source tag, and we're going to put app.js. Now this is important because we want the
JavaScript to run after the rest of the HTML
has already been laid out. It goes after the body tag. The syntax for this is script
and then source equals, and then the name of
your JavaScript file. Again, you can call yours
whatever you'd like. Now let's make our CSS. I'm going to call this style.css to make sure this is working. Do body and we'll do a
background color of green. Now we link the style sheet, the style.css up here
in the head tag. Let's create a link tag. And you can go down
to CSS here if you've got the Emmett abbreviation on. But all that's
going to do is tell you that it's tell the code
that it's a style sheet and give the link
to the style.css. So this is our basic syntax. This is all we really
need to get started. Very simple website. Let's go ahead and it. Now in this class
I'm going to be using a VS Code
extension to test this. And I'll show you what that is and how to
get it. Let's see. This extension is
called Live Server. If you go to your Extensions
tab here in VS code, you can just search. Live server should be one of the first
things that pops up. You'll just want
to install that. Now what this is going to do is when we come
into our HTML file, we can right-click and say
Open with live server. We can also stop
the server here. And there should also be a button down here
that says Go Live. This button doesn't
always show up. So I typically just rely
on this right-click menu. If we open with a
live server here, then this is what we get. We get our green
Hello World so we know the style sheet is properly connected
and configured. The HTML is good. It says Hello World. If we press Control
Shift I on Windows, then this will open up our console and it
says Hello World. Again. We know that everything
is working properly or JavaScript is
properly connected. Everything's working in that
front and you don't need to worry about this error message. It's not super relevant to what we're trying to
work on right now. But this is the basic setup. Just a quick recap. You want three files, index.html, app.js
and style.css. And remember,
app.js is linked in a script tag below the body tag, but still within HTML. And the stylesheet is within
a link tag up in the head. Okay? Alright, I'll see
you in the next one.
3. Selecting Elements: Alright, now we're going to talk about selecting elements. Within DOM manipulation. It's very important
that the code knows how to get the various HTML elements
and do things with them. We're going to start by
going to our app.js file. We can remove this
log statement here. Now, currently on our website, we have our Hello World. Right here. Let's say that we want
to select helloworld so that we can manipulate
it or do something with it. Now, right now, hello world
is just a paragraph tag. It doesn't have any
classes or IDs. I'm going to show you how to
select it just like this, but also how to select it
with a class or an ID. Now, to select it like this, actually, I'm going to start
with using an ID or a class. Let's start with an ID within
our paragraph tag type ID, and we'll just give
it the name hello. Now let's go to app.js. And we want to do is we want to store the paragraph tag within a variable so that
we can do things with it. We're going to say, let
say paragraph equal. Now we're going
to type document. Document is how you access
the document object model. That's what we're using. Almost all of these commands, if not all of them,
start with document. We say document dot, get element by ID, and make sure that the
D in ID is lowercase. Now VS Code is really
great and should be suggesting these things for you. If it's not, then checkout the extensions store to find a free JavaScript extension
for syntax highlighting. We said get element by ID. The ID of this is hello. We put parentheses and in
single quotes will say hello. Now what we can
do is we can do a console.log on the
paragraph element. And it will show us
what we've actually selected so we can
see what we're doing. If we save it. I forgot to mention
in the last video, every time we save
changes in these files, the server, the live server will automatically refresh the
page so you don't have to. If we come in here, it
still says Hello world. So press Control Shift. I I believe that's
Command Shift I on Mac. If not, just look up
what that command is, you'll see that it
logged this element. So if we look back at the code, we said paragraph equals
document.getElementByID. So what we've done
is we've effectively grabbed the element out of the HTML and we set it
equal to this variable. Now let's explore this a
little bit and let me show you some of the properties
that this has. If we go to paragraph
here and we press dot, it's going to suggest
all sorts of things. There's all sorts of attributes that we can access from this. Let's say, for example, we want to access
the text inside. We can say textContent. And now we're logging the text content,
which is HelloWorld. Now there's a number
of things you can access from here and
we'll get more into that later when we
manipulate styles and make buttons interactive
in that type of thing. But for now that's how
we select an element. So let's say that
it's got a class. We'll do the same
thing with hello, but this will be a class. Instead of saying
get element by ID, we want to use get
elements by class name. Now the class we put
in here is hello. Let's see what happens
when we logged this. You can see it brought up something called
HTML collection. And if we open that
up, it's an array. The first element in index 0 is a paragraph tag
with a class of hello. What if we just
wanted the element? How do we select that? Well, the thing about classes is multiple objects
can have a class. And so if you select the
elements by class name, it will get an array of every element that
has that class name, even if there's only one. Now, IDs are different
because you only Should put an ID on one element. So when you say
get element by ID, it's going to give
it to you directly because there should only be
one element with that ID. If we want to access
the specific element, we know that within the
code it's the first, it's the first place where
we see this class of hello. Then right after this, we can put brackets to
access the 0th index. And that's going to access
that first element, which will be the
tag that we want. If we save this and
come back here, you can see that we've
selected that whole element. Now we can do the same thing if without using class or ID. Let's say for example,
we've just want to select all the paragraph tags. I can do is come up here and say document dot get
element by tag name. Remember the tags are
these things right here within the carrots or whatever
you call those things. We can get all the
paragraph tags by saying getElementsByTagName
p for paragraph, make sure that's in quotes. What does that show us? Again, that shows us
an HTML collection because we can have multiple elements,
multiple paragraph tags. Let's see what it's
showing us here. In the 0 width index, we have our paragraph tag. In the first index. It's got something also. I'll have to check
and see why that is. Okay. So I just took a break for a second and I figured out
what the problem was. The problem was
that in our HTML, I had to opening tags for the paragraph tag instead of having the slash
here to close it. Oops, it thought that there were two separate P
tags. I fixed that. And if we come over to app.js, we can see it says getElementsByTagName,
we're getting the p. Then if we come over here and
we'd look in Chrome here, you can see it's an array
with just one element. Now, again, we do
the same thing. We can do the same
thing as we did with classes where we can select the zeroeth index and
see the exact tag. We've learned how to
select elements by tag, name, by ID, and by class. What's next? Well, let's say that you want
to select an element based on several attributes
and not just its tag, its class, or its ID. That's where the query
selector comes in. Let's say that we've got this Hello World
paragraph tag here. Let's give it a class of hello. Then we'll have
another paragraph tag that also has a class of hello, but it also has an ID
of, let's say pancakes. We can say something here. Pancakes are amazing. If we output, Let's
see if we get elements by tag name
and we output that. Let's see what, what comes up. Okay, so we've got
this, this array. Again, there's two elements. Now, even if we say get elements by className, we say hello. It's going to
return two objects. So we can specify a little
further what we are wanting. If I want it to have a class of hello and an ID of pancakes, that's where I can use
the query selector. What we would want to do
is come over to app.js. Let's say document
dot query selector. Query selector. Basically you can give it
several different attributes of an object and it will
find them rather than specifying id or
class or tag name. Let's say we want a
paragraph tag and we know that it has
a class of hello. We put a dot hello. The reason we put a
dot is because that's the syntax that we would
use in our style sheet. For example, if we wanted
to access the hello class, we'd say dot pillow, and then we'd give it styles. That's the same thing
we're doing here. Now, IDs are selected
using pound sign. I'm going to show you
that in a minute. Let's output this and
see what comes up. When we selected
the hello class, it chose the first object
that I could find. And that's kind of how
the query selector works, is it binds the first object that matches your parameters. But that's not what we wanted. We wanted pancakes are amazing. We can specify further and
say pound sign pancakes. If you remember, we had
the idea of pancakes here. Now if we output that, it got the element we wanted. However, because
pancakes has an ID that makes it unique and we don't actually need all of this. We can get rid of most
of these things and just say an ID of pancakes
that has the same effect. That's specific enough for
it to know what we want. And so you can see that we have similar syntax for
doing the same thing. There's different
ways of doing it. If I say paragraph two. So this is fairly
similar syntax right here we have a
query selector that gets the first thing with
an idea of pancakes. Here, we just get whatever
has an idea of pancakes. So you can see there's
different ways of doing the same things. Now let's say when we were
looking at the p dot hello, it popped up with just
the first thing I found, which is what
querySelector does. So what if I want everything
that matches that now? Well then what I can do is I can use something called
querySelector. All we'll put in the same thing. We'll say p dot hello. That gave us this
node list array of both of the attributes. Why have query selectors at all if we have the other ones? Well, querySelector
is you have to do a lot of these kind of
selecting different elements. Query selector can be nice because you don't
have to remember. Get element by ID,
element by classroom. You don't have to
type all that out. You just say query
selector and then specify, oh, this one is a class,
this one's an ID. This one is just a tag. So if we wanted just the tag, we could get rid of
the dot hello and just say query selector all p. And that's gonna find
everything that's a p element. These are the various ways of selecting elements and
that's going to come in real handy when we
start manipulating CSS and using buttons
and things like that. I'll see you in the next one.
4. Creating Elements: Now we're going to learn
about creating elements. Basically, we're going to programmatically
create various tags, add classes and IDs to them, styles, all those
sorts of things. And we're going to insert
them into the page. Let's get started
in our app.js file. I'm going to remove all of this. Let's say that we want to
create a button below this. I'm also going to get rid of
the pancakes are amazing. Let's say we want to make a
button below this that will, later on we'll make it change the background
color of the page. But for now, we're just going to create it
and put it in the page. What we want to do is
create an element. We'll call this button, will be very creative
and set it equal to document dot create element. Similarly to the selectors
we've been using, you'll do single quotes
and then the name of the tag, which is button. If it was a paragraph
tag, you'd say p. If it was div tag,
you just say div. So pretty straightforward. We've created a button. Now this hasn't done anything
to the page because all we've done is set it
equal to a variable. Let's console.log this
and see what we have. We have a just an
empty button tag. Let's add some text to it. To do this, we need to create
what's called a text node. Let's say, let's text node equal document
dot create text node. Now let's say we want to have it say change background, color. We're just change
color to be simple. Now if we go back and look, we've created the
textbook, but we haven't put it in the button. So what we need to do is
say button dot append. Actually we're going to append
child will say text node. What that means is now
the button or the text is a child or basically it's
inside of the button tag. If we say Save, then it shows us that we
have this button here. And it has all of
these attributes. We've got our button. We want to put it on the page. Let's say we want
to insert it right after this HelloWorld tag. Let's change this to an ID
to make it easy to select. What we need to do is select the HelloWorld tag and then put the put our button right
after, append to it. What we're going to do is say Hello, World equal document
dot querySelector. And we're going to
say pound hello. After that, we want to say helloworld dot
append the button. Now you can see we've put
the button right after it. It doesn't do anything, it's just text and we can click it. But that's kind of cool, right? Let's see. We've got it right
after the text. To make it look a
little prettier, little easier to look at. We're gonna change some of
the styles in style.css. Go to Button. Styles for the button,
All button tags. Technically, we want to say display block because currently buttons default to
an inline display, which means that they
can display right next to text or other objects. A block display. We'll put it under,
it'll display blocks. If we say display block, that will be below this, we want to give it some space between hello world and itself. So let's do, let's do a margin. Actually it will
just do a margin. Top five pixels,
maybe ten pixels. Great. We've got our
button, we've created it. What else can we do with this button while
we're creating it? The interesting thing is, it's almost easiest to
create the button and put everything inside of it before you throw it
out onto the page. Now of course, you can select it later and do things with it. But if you know that
you are a class, if you know you want
styles with it, it's easiest just to put it altogether in one package
before you send it to the page. I'll show you what I mean. We've got our text node. Let's say. We also want
to change the style. Now in the next video, I'll get more into style manipulation and
that type of thing. But very briefly,
let's say we want. But let's do button dot style. Now we can say color. Actually background
color would be, color would just be the text. But if we say background color, then we could say light blue. You'll notice this syntax
is different than CSS, and I'll just tell you how that works briefly
before the next video. Normally in CSS, if we wanted
the button to be blue, light blue or whatever,
then we'd say background, dash color, light
blue, like that. The difference
here in JavaScript is that background color is a single word using CamelCase, so that the first
letter is lowercase and the following
words are uppercase. Background color, light-blue. Let's save that and get rid
of that. Let's go look at it. It doesn't appear
to have worked. Let's see, we got
an error button dot style dot background color is not a function. So what it's saying
is it's saying, Hey, you can't put a parameter
in there because technically This is treating it like a function and
you can't do that. It looks like that's not what
we're supposed to do here. Instead of using
it as a function, we're going to say
equals light-blue. Let's try that. It's a
little hard to tell, but it definitely is different. It's not white anymore. Let's see if we can do
it more distinct color. We'll just say Blue. You can definitely see that, okay, but what if we want
to change the text color? We can say button dot style, dot color equals whites. Great. So that's sort of how we, how we append these
different objects. We have to create. Imagine it's like a pyramid. We have to at the base level, we need our element, our button. And then one level above that, our text or anything else that might be inside
of the object, we create. One level above that is sort of our styles and
everything else. You could do this
with any element. It doesn't have to be a button. It could be a div, it could be header tag. You could really do
whatever you want. We've inserted that button
in a couple of videos. I'm going to show you
how to make it changed the color of the
background here, but that is just a quick
view of creating elements. Alright, I'll see
you in the next one.
5. Manipulating Elements (especially with CSS): Alright, in this video
we're going to talk about manipulating
elements in the DOM. So currently, we've
got our button here, we've got our Hello World. We have our background color. Let's see what we can
do with these elements, starting with that
background color. It's not very pretty
in my opinion. Let's change it
to a nicer color. In our app.js, I'm just going to create some space and
come down here a little bit. So let's say we want to
select the body because the body is what we used to create a background
color of green. Here we can say
background color. Oops, sorry. We can. First we have to
select the body. Let's say let body
equal document dot, get element by tag name. You could also use
querySelector. Will say body. I believe you have to capitalize this one fully because
it's a special tag. Let's see if that
works properly. Okay. Okay. Yes. Okay. Sorry, I was wrong. This does
not need to be capitalized. So what happened is when I typed in body right
here and logged it, it gave us this HTML collection, essentially an array of
elements. That's what that is. And it said, okay, at the first index, index 0, we have one body tag. It's a little bit silly because
the way the tag selector works is it creates an array because we can
have multiple tags. If we say get elements
by tag name P, it'll get all the
paragraph tags. Now, it did the same
thing with body, but we can only
have one body tag. What we're going to do
here is select element 0 that gave us our body. And you can see it's
selected when we highlight our cursor over it, it selects the whole page. And if you open that up,
you can see everything. Everything is down
there inside of it. Okay, so now we've got the body. Let's change its
background color. So say body style. Style is how we access
the style property. Okay, So let's say
background color equals. Let's give it. Let's see if light
pink is a color. I have no idea. Let's try it. There we go. Yeah, I like that.
That's a nice color. Let me show you the
difference between the functions that we used
earlier and these equal signs. In the last video. I discovered I made
a mistake where I tried to use background color. Do something like this
where I said like background color,
parentheses, light pink. But the thing is, it's not a function. Create text node is a function. It's reading something
made of text. Create element is a function. Queryselector is a function, but these are
properties of elements. Let me show you what I mean. Let's select the,
let's select well, we can select the body tag. We've already selected
the body tag. Let's log it. Let's
click on that. What do we get? Body actually may not be the best example. Let's try, let's try the button. Let's, let's see. Sorry about that. Body tag. The body tag is a
little bit weird, so we're going to select our paragraph tag that
says Hello World. Just for this example. Let's say p for paragraph equal. Document, query
selector, pound, hello. Then right below that, we will log P. We have
logged P right here. We've selected this
paragraph tag. But what we want to do is to get a little bit more detail
is we're going to put the p.ball before the pound right
here in the querySelector. So that way we can access
more information about it. It's a little bit confusing. But when we log it, you'll see that we
have this P lb hello. If we click into that, you'll see there are
all of these things. These are properties
of our paragraph tag. This right here,
this paragraph tag has tons of properties. Most of them say null. We're not using them. But some of them we are,
for example, style. If you click on style, you'll see a list
of every style, basically every possible
style for this object. Again, most of which
were not using. But let's say we want to change the color
of that hello world. Well then we can come look
in here and find color. My point with showing
you this is to show you why this isn't a function. Y. When we try to change the
background color of body, we said body dot
style dot background, color equals light pink. We did that because
this light pink, sorry, the color was
a property under the style property
for this element. If that was a little bit
confusing, it's okay. You don't have to
worry about it. Just know that when you are modifying some piece
of an element, its CSS, it's what happens when you click
it, all these things. These are properties
that you set equal to a value which are different from these functions right here. Now, when in doubt, if you look up change style, background color for
an element online, you'll be able to
see the syntax for this if you forget or if you
look up create text node, you'll be able to
see the syntax from a website like Mozilla
or W3 schools. There are lots of websites
that will tell you the exact syntax
of these things. But back to what we were doing, we were changing the
background color here. Let's see what other
properties we can change while we're
selecting our p tag. If we click P and press period, we can see all sorts of things. So maybe we want to change the text and click here
on the text content. We know from earlier that the
text content is helloworld. What if I want to change that? I can set this property
equal to I like Pi. Now you can see that
the JavaScript has manipulated this
element, it's changed. It's textContent property. If you want, I would
encourage you to look through the properties
of each element. You can do this in
VS code simply by pressing the dots after something and scrolling
through this list, it'll tell you all sorts of
things that you can access. For example, next sibling, which will tell you what
element is right next to it. Or we could look up inner HTML that will show you what
HTML is inside of it. You can ask if it has
a certain attribute. All these sorts of
things actually, Let's try that one
has attribute. Let's say. I'm gonna show you
a little bit of, a little bit more logic. The code with this
has attributes. I'm going to get rid of that. Let's, let's see, let's
do an if statement. We'll say if P has
the attribute color, has an attribute color, then we'll do something. I actually sorry, not
the attribute of color, the attribute of
style dot color. I'm not sure if that
exact syntax will work, but we will console success. Let's see what happens. It looks like we
didn't get anything. What if we just say style? Still nothing? Perhaps we need to add a color. So let's try p dot style
dot color equals blue. Okay, so look at this. It logged success because it noticed that it does have
the attribute of style. Let's see what happens if
we do style dot color. That doesn't work for it. So attributes in
HTML elements are these things right
here that you put within quotes that you
put within the element. So I could see if hello world has an idea of Hello by coming over
here and saying, if, let's see, let's do dot. We can do p dot get attribute. Let's say we want the color. We'll set this equal to
blue. What is this doing? It says, get the
attribute of color. Oh sorry. That's not
what we're doing. I just spaced out a little bit. We wanted to know the ID. If that was hello. We got the attribute ID,
which is right here. We want to say if that
attributes equals hello, then console a success. Which it does. If we
were to say if it equals goodbye, no success. You can kind of get the see
how this is working from an overhead perspective and
see that there's a lot of possibilities with
JavaScript logic where you can use if statements. You could use loops. For example, you could
use a for-loop and say, for numbers one through ten, create these elements
or change their colors. Do all sorts of things. The possibilities are
basically endless. So I've shown you a
lot of things here. I would recommend if, if some of this was confusing, try to re-watching the video. Just go through step-by-step
and learn what you can do to manipulate these objects. But just know that
a basic recap, each element has properties, it has hundreds or
800 properties. And some of those properties
have properties within them. For example, the style
has color, background, color, margin, all
those sorts of things. You can access those using
these various functions. Off of elements. You type the name of your variable and
you type up period. And it gives you all
sorts of things. I would explore these. If you don't know what one is, look it up online and it
will tell you the syntax. It will tell you how to use it, and all the things
you can do with it. But I'll see you guys in the next video when we make
this button, do things. All right.
6. Making interactive buttons: In this video,
we're going to make our button do some cool things. We're going to make it change color and maybe outputs
something in the console. Let's get started. To make things a little bit
simpler for now, I'm going to comment
this out and I'm going to make our button. I'm going to hard-coded
into the HTML just to make it a little bit
easier to manipulate. All right, We've got our
change color button. Let's say if I
click this button, I want it to change
the color to blue. So what we're going to do is I need to create a
function that when it's run, will change that color. Let's write the function. I'll call this change color. For now, let's just do console.log, changing
color. Okay. Now in our HTML, we need to trigger this somehow. In our button tag. We're going to put an
attribute called onClick. So you can get from that. But when we click it, it's going to do something. And we're going to
type that function, change color, make sure you have the parenthesis.
Very important. When I click this button, we want it to log
changing color. If I open up the
console and I click it, changing color, you can
see the more I click it, the more it repeats
that message. So now let's do
something cool with it. What we want to do is we want to select the body and
change its color. So we're gonna say let
body equal document dot. Get elements by tag
name, save body. And remember we have
to select elements 0 to access the body. And we do that because
when we select tags, it gets an array of
every tag of that type. And body does that too, even though we only
use one body tag. We select body. And then we say body dot style, dot background
color equals blue. Now when we click our button, we just changed
the color to blue. But if you click it again, it doesn't change
back. Why is that? Well, if we look at the code, we're only telling it
to change it to blue. If we refresh the page, it'll go back to green. But as soon as we click
that button, blue. So I'm gonna show you
how to make some logic to change it from
one to the other. So let's say we've selected
this tag right here. I'm going to get rid of this. Let's create an if statement. We'll say if body dot style
dot background color equals, make sure you have that
double or triple equals so that you're not single equals would set it like a variable, set a value to a variable. We want a double or
triple equals to make sure we're comparing a quality. You can look up the
difference between double and triple equals
signs on the line. If the color equals green, because I think that's
what we chose earlier. If it equals green, then change it to blue. Else, meaning the
background color is already blue or
something else. Else, change it to green. What this says is that it gets the body element and it says, Okay, if the background
color is green, change it to blue. If it's blue, change it to green because we have
this else statement. So if it's not green,
change it to green. We go look at it. There we go. We're changing between
blue and green. And every time we click it. Now, as you can see, there's a lot of texts
going on here in this if statement and
right here, that's been. Trend throughout this course. If you look up all of these
things we've created, there's a lot of text involved. That's sort of the nature of vanilla JavaScript or
just plain JavaScript. One way that we can shrink that down is if we're going to use
something multiple times, for example, this
background color, we can set the background
color equal to a variable. We could say let background color equal body dot style dot background color. That way. We can just keep this
background color part that significantly reduces the
amount of code that we need. But did it work? Let's see. It didn't work. Let's see
if there are any errors. No errors. I realized the problem is a good little coding
lesson for us both. See here, I set the
background color equal to whatever the current
background color is. But here I was just changing
this variable's color. Now this variable,
once it's been said, is detached from the
body element itself. We're changing this, but not
what we want to be changing. And so I apologize, I made a little mistake in
explaining this to you. These two things
would still need to be body dot style dot
background color. Because we do want to change that original
background color, but we can still check the
background color like this. Using this variable,
which improves readability in the if statement. There we go. Now we
got it working again. There may be ways to
get around this if we were to take more
time and dig into it. But you might be
wondering, well, what's the benefit of
declaring this up here? And then that down there. In this situation there's
not much benefit. We could definitely write out body dot style dot
background color right here. But let's say we wanted to use this background color
somewhere else. And say, well, if background
color blob, blob, it's nice to just
have it shorthand and very readable because it's important to have readable code. You want to be
able to look at it and see what you're doing. That's a little
hint into what we can do with the
background color. Now, we'll take it
a step further and do a little console.log. Lets say this will be
blue and this one. Whereas madness, There you go. Console dot log green. Now if we open up the
terminal, there we go. Blue, green, blue, green. It's kind of cool. You can imagine all sorts
of things you do with this. Whereas the real-world
application, well, every website you go to
basically has buttons. And when you click on
there running JavaScript, that's doing all
sorts of cool things. Calling functions that get
data from the Internet that, you know, send messages. You can do unlimited things really with this functionality. So this is just a very
basic look at it. And it's something I
wanted to share with you earlier when I was talking about shortening your
code using variables, is that there are a variety of what we call JavaScript
frameworks out there, which are essentially
somebody took JavaScript and made
a version of it that has additional
functionality or easier syntax in the code. That's called a framework. And you may have heard of these, some of our jQuery
Angular React View, these are all
JavaScript frameworks. They're just different
ways of writing the code. They each have different
syntax, different features. And so if you are having that shortened code is
really important to you, then I would suggest
looking into a framework. It takes some time to learn, but it can be a very
rewarding experience. Oftentimes when you have a large complex app website that you're trying to do things with, with
DOM manipulation. It can get messy quickly. I mean, you can
imagine having all of these functions and just all
this code written out here. It's a lot. And that's just the nature of vanilla JavaScript
or plain JavaScript. But this change color function. If I were to do this in
Angular, for example, it may only take
three lines of code. Who knows? It can just be much easier
to do things more quickly. But this is, it's important to know these
things because a lot of these DOM manipulation
principles that we use with plain JavaScript are used in those other frameworks. I know that I showed you
a very basic example of just changing the background color
through this button. In the next video, I'm going to talk about the project that
I want you to do. That can be really rewarding, that can really teach you a lot. Because the best teacher I
think is doing it yourself. It just digging
in, trying things. I'm gonna talk a
little bit about that, but that's all for this video. This just a quick recap. We talked about making
our button do things. So we used the onclick attribute and set it equal to a function. And that function is important. We had to declare
that inside of it. We could do whatever,
whatever we wanted. You know, you don't even
have to manipulate the HTML. You don't have to
manipulate the page. In this function, it could do something totally different. It could compute math. It could, There's a
number of things. But basically we selected the elements and did
an if statement to change the color depending on what the background
color was set to. Okay. I'll see you guys
in the next video.
7. Project/Conclusion: Alright guys, you
have made it to the last video of this
DOM manipulation course. You should be proud
of yourselves. The skills that you've
learned here are going to be very important in any
web development that you do. And really just improve your
coding knowledge overall. These are things that really fascinate me that I enjoy and I hope
you've enjoyed it too. To help you enjoy a
little bit further, to help you learn more. I'm going to talk about the project a little
bit right now. For this project,
it's very simple. I just want you to explore, explore every function you can find anything that looks
interesting to you. I want you to try it. If you have an idea of something
simple you want to do like, Hey, if I click this button, I want to change the text
on the page to something. Or I'm going to
calculate some math. You can make a basic calculator or really whatever you want. I want you to go try
it, explore functions, use the capabilities
of VS code that I taught you as well as the Chrome Developer Tools
to view the attributes, to select the things
you want to change. There's so many
things you can do. You could even try making
a webpage completely out of escaping me completely with elements created
by JavaScript with no hard-coded HTML or CSS. That could be a cool challenge. But really I just
want you to have fun. I want you to explore and share your
creations with others. If you learn something, show it to someone else. I think that taking the
time to dig through this and I didn't learn
it yourself a little bit and share your success
with others is going, it's just going to
feel really good. I hope you guys have
enjoyed this course. I hope that you'll take me up on this project and just
try it for 15 minutes. Try to manipulate objects, tried to do something cool with JavaScript and DOM manipulation. If you guys enjoyed this course, please check out my other
courses on Skillshare. I have one on Angular
and components, services, all sorts
of things, routing. There's a great
Angular course there. I'd recommend to go check
it out and I will be publishing more classes
hopefully soon in the future. So please check those out as well and share these
with your friends. That could really benefit
from this knowledge. But until then,
My name is Taylor and it has been a pleasure
being your instructor. And I wish you well.
Taylor English, Learning doesn't need to be hard :)
