#100DaysOfWeb in Python Transcripts
Chapter: Days 25-28: JavaScript Introduction
Lecture: DOM part II: add/remove childs, override CSS, event listeners
Login or
purchase this course
to watch this video and the rest of the course contents.
0:00
All right, continue with the demo. As we've seen the quotes are listed in descending order and I did that on purpose.
0:09
So the next task is to extract them and write them back to the DOM but now in numerical order. So we have quotes already stored in a variable
0:20
the only problem is that I can just reverse them let's see what happens. Oops, reverse not a function. That doesn't say that much
0:36
let's just bounce it within that art. Ah, it's an object of HTML collection which doesn't have a reverse method. So I need to cast it to an array
0:49
we can do that like this. If I bounce this to alert I should get what I want a proper array. And erase after reverse method
1:06
so if I do this I should get what I want and of course I see only the parent note name I've already resolved at church, it was this one
1:19
which now shows as the third item. So this seems okay. So lets write 'em back to the DOM we start them in quotes learn how you could get the quotes id
1:35
remember that the unhonored list had an id of quotes. So let's target that, I'm going to define a quote eval variable
1:52
and use a get element by id of quotes. To verify that I get the right element let's just override, what's in that tag.
2:12
And that didn't work because I made a typo well that was a silent error because I had to use enter HTML and that's something you have to get use to
2:22
when writing JavaScript that some errors are not shown and unexpected behavior might happen. So be prepared for that, now it worked.
2:31
So I got the list items overridden by some text, so let's populate the unhonored list with the quotes of now in numerical order.
2:44
And I can use appendChild, with the quote. Let's get rid of some text and look at that, awesome. Now they're in the right order
2:59
and it's writing them actually overriding them back to the DOM. Let's add a new quote. I had this already in my bathroom because it's a lot of typing.
3:10
So I define with everyone new quote which is from Douglas Crockford who wrote "JS The Good Parts" so let's add that one as well.
3:17
Notice that I cannot just add the new quote with appendChild, like we did before because this merely created the TextNode.
3:26
Actually I can but it's not a list item so the proper way to do it is to first create a new list item with createElement
3:44
use the appendChild on that new element and implant that new list item instead. So here it gets me to write HTML a list item and inside it this text
4:01
and then it shows up as a list item. To remove that last quote, it's very simple you can target the same quote ul and use the removeChild method.
4:20
And it's gone again. Let's do a little of CSS. What if you'd color the quotes given the even and uneven quotes a different color?
4:39
The module index is 0. And set the quotes style, the color to say red else we set up to blue.
5:14
And there you go, now the uneven quotes are red and the even quotes are blue. And that was pretty easy to do Finally let's add a behavior to the quotes
5:26
I'm going to add an EventListener that's going to watch if the user clicks on the quote. So I'm going to use the same file.
5:39
Add each quote, is going to get an add EventListener and it's going to listen to click events. And we have to give it a callable which gets the event
5:55
and know we can do something when a user clicks. I'm going to get the target element which is target work not set.
6:15
I get this source element. I'm going to define a tweet URL which is the standard intel link. And then to add the argument element in our HTML.
6:32
Now if we send anything in a URL which we are basically doing here I need to make sure that I URIencode the content And JavaScript comes with a handy
6:46
encode URI, for example, my quotes contain spaces and what encoding does is converting spaces to percentage 20 to make it compatible to share in a URL.
7:08
Now we are going to open a new tab which is to tweak your URL. And to do this in a new tab, I can specify blank. We are going to get to use
7:20
a bit more information, what they can do so I'm going to target again that more paragraph and append. Lets see if it works.
7:43
I've got a typo, right I did not close off the parenthesis. And hear I see click on the cross to share them out to Twitter.
7:55
Awesome, and notice that this is the URI encoding in action, so all the spaces are converted to percentage 20. Let's click on another one
8:10
so if I click on another quote this handler fires, grabs the quote and turns it into a Twitter share link and goes to that link opening a new tab.
8:21
Pretty cool. The click event is just one example there are many, many more. For example we can add mouse over mouse out, resize of the window, etc.
8:37
And to all these user behaviors we can add an EventListener and a function to do something based on this user behavior.
8:46
In the final two projects you will work a lot with the DOM and it's elements with the demo shown you should have all the basics to give that a try.
8:55
In the next video we are going to look at debugging in JavaScript.