Become A Web Developer - Part 10: DOM | Andrei Neagoie | Skillshare

Become A Web Developer - Part 10: DOM

Andrei Neagoie, Senior Software Developer + Instructor

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
6 Lessons (1h 24m)
    • 1. Document Object Model

      8:42
    • 2. DOM Selectors

      17:12
    • 3. DOM Events

      26:57
    • 4. Exercise: Background Generator

      19:25
    • 5. jQuery

      6:53
    • 6. Developer Fundamentals: V

      4:46

About This Class

DOM Manipulation

This is the tutorial you've been looking for to become a web developer in 2018. It doesn’t just cover a small portion of the industry. In this multipart video series we will covers everything you need to know to get hired: from absolute zero knowledge to being able to put things on your resume that will allow you to live the life you want. 

Sounds too good to be true? Give me 5 minutes of your time to explain to you why I built this course and what is different here than thousands of other courses all over the internet.

  1. There is no wasted time here. We won’t be using outdated technologies like PHP, Wordpress and JQuery. Although still useful, outdated technologies like the above are low paying and demands for them are decreasing. In this course, you will learn the specific technologies that are the most in demand in the industry right now. These include tools and technologies used by the biggest tech companies like Google, Facebook, Instagram, etc… It’s geared specifically for people that want to learn employable skills in 2018.

  2. After finishing this course, you will be able to apply for developer roles, or upgrade your job title as a developer and earn a higher salary. We won't be taking any shortcuts in this course. I am going to take your from absolute zero, where I teach you how the internet works, to mastery, where I show you how to build an image recognition app using a Machine Learning API (a subset of Artificial Intelligence).

  3. This course is taught by an instructor who has worked in silicon valley, and one of the top tech companies in Toronto. I have built large scale applications, and have managed a team of developers. I have worked directly with these technologies. I am not an online marketer or a salesman. I am a senior software developer who loves programming and believes that there needs to be a course out there that actually teaches valuable skills.

  4. I know your time is valuable. You want a course that outlines the best way to learn the topic in simple, well explained methods so that you fully understand topics instead of watching somebody on your screen and having no clue what is going on. I have created this course after consuming hundreds of books, tutorials, and online courses while I was learning. I have taken the best pieces, the best methods, that I have found, and condensed everything so that you can learn in the most efficient way possible. 50 hours of videos doesn't mean much if the instructor isn't engaging or focuses on outdated topics. 

  5. We have a thriving online chat community so you really feel like you are part of a classroom and not just watching videos by yourself. You will have a chance to communicate with fellow students, work on group projects together, and contribute to open source. Anytime you have a question you can ask in the chat and someone will surely be able to help you right away. 
  6. The course is designed to give you employable skills so you can get a job. Here is what one student recently wrote after taking the course and being hired right away: 
    "I’m a self taught dev, who has been out of work for ~6 months. I had some family things that came up that prevented me from seeking permanent employment, so for awhile I was Postmates/Uber delivery driver.
    After taking this course, I immediately got catapulted back to where I was before, but better equipped and with the knowledge to take on the next job. I had just finished the React section when I went to a recent interview, and it really helped me excel. As of today, I am officially re-employed back in the field, and it is all thanks to this course. I had a blast creating the final project, and FINALLY got around to learning SQL statements, and getting to use them in a project. I’m really ecstatic that Andrei went with teaching relational databases over something like MongoDB, which can also be fun, but is less practical for use on the job. So thanks Andrei , I really enjoyed the course and will be making sure to share it with others who find it helpful. I’m also looking forward to the new ES7/8 content that was recently added, and going through the DB stuff again when I go to build a personal project."

In this course, you will be taken through online videos and exercises where you will be able to do the following things by the end:

  • Build real complex applications and websites
  • Build an image recognition app together at the end of the course so you can add it to your portfolio
  • Go into a job interview confident that you understand the fundamental building blocks of web development and the developer space in 2018
  • Be able to go off on your own and grow your skills as a developer having built a solid foundation
  • Learn how front-end, servers, and databases communicate and how they all fit together in the eco system
  • Build your own startup landing page. 
  • Go off and remotely work by being a freelance developer and bid on projects.
  • Know EXACLTY what a day in the life of a developer is like and what the day to day technologies and tools will be that you are using. 

By the end of this course you will be comfortable using the below skills and you will be able to put them on your resume:

  • HTML5
  • CSS
  • Bootstrap 4
  • Javascript (ES6/ES7/ES8)
  • React + Redux
  • Git + Github
  • Node.js
  • Express.js
  • NPM
  • PostgresSQL
  • SQL

This course is the accumulation of all of my years working, learning, and teaching coding and all of the frustrations and incomplete information I have encountered along the way. There is so much information out there, so many opinions, and so many ways of doing things, that unless you have spent the last years working with these technologies in a company, you will never fully understand. So this course is the answer to that exact problem. I have gone through thousands of coding books and online tutorials and bootcamps. I have worked with these tools on real applications. Throughout the years I have taken notes on what has worked, and what hasn't and I've created this course to narrow down the best way to learn and the most relevant information. 

I will succeed if you succeed in this course. Therefore, I will be there every step of the way helping you understand concepts and answer any questions you have.

I am 100% confident that you won't find a course like this out there that is as well organized, and as useful, to build a strong foundation for you to start a new career. We're not going to be building simple todo applications and cat image sliders. We are going to learn actual practical skills that will put you into the workforce. Some unique sections that you won't find anywhere else are:

  • React.js + Redux: you will learn the library that companies like Netflix, Facebook and Instagram use to build fast, scalable applications. This is one of the highest in-demand skill in the industry.
  • A day in the life of a developer: What will your day to day look like and what tools will you use? I will take you through a sample day at a tech company.
  • How does the internet actually work. What is the history of these technologies: I will actually have you understand the underlying concepts of the internet, and how the technologies we have now, have come to be where they are.
  • How do you actually deploy a real life app so that it is secure, and won't get hacked: How does a real life app get out to the public?
  • What is Machine learning and how you can harness it's power: Whether you have heard about it or not, this is something that you will hear more and more in the coming years. Those who understand the high level concepts and can harness it will have an advantage. 
  • What is your developer environment on your computer look like: We will be setting up our computers with all the tools necessary of a developer so you can use the same setup when you go into the workforce.

Why do we teach the above? Because in this day and age, just knowing HTML CSS and Javascript is not good enough and you won't be able to grow in your role and command a higher salary. I am teaching you these things because these are the things you should know in 2018 so that you are miles ahead of the rest. 

Make this the year that you took a risk, you learned highly in demand skills, you had new experiences, and you received new opportunities. I hope you join me in this journey. 

This is the proudest work I have ever done in my life and I am confident that you won't find a course better than this. 

See you inside!

Taught by: 

Andrei is the instructor of the highest rated Web Development course on many platforms. His graduates have moved on to work for some of the biggest tech companies around the world like Apple. He has been working as a senior software developer in Silicon Valley and Toronto for many years, and is now taking all that he has learned, to teach programming skills and to help you discover the amazing career opportunities that being a developer allows in life. 

Having been a self taught programmer, he understands that there is an overwhelming number of online courses, tutorials and books that are overly verbose and inadequate at teaching proper skills. Most people feel paralyzed and don't know where to start when learning a complex subject matter, or even worse, most people don't have $20,000 to spend on a coding bootcamp. Programming skills should be affordable and open to all. An education material should teach real life skills that are current and they should not waste a student's valuable time.  Having learned important lessons from working for Fortune 500 companies, tech startups, to even founding his own business, he is now dedicating 100% of his time to teaching others valuable software development skills in order to take control of their life and work in an exciting industry with infinite possibilities. 

Andrei promises you that there are no other courses out there as comprehensive and as well explained. He believes that in order to learn anything of value, you need to start with the foundation and develop the roots of the tree. Only from there will you be able to learn concepts and specific skills(leaves) that connect to the foundation. Learning becomes exponential when structured in this way. 

Taking his experience in educational psychology and coding, Andrei's courses will take you on an understanding of complex subjects that you never thought would be possible.  

See you inside the course! 

Transcripts

1. Document Object Model: Welcome back. It's time to get back to building Web pages, but this time with JavaScript. Up until now we've learned HTML and CSS, and then we learn JavaScript but separately. The true power, though, comes when we combine all these three technologies. Now. In the previous videos, I mentioned how JavaScript allowed actions to be performed on the weapons. Well, what did I mean there? By adding JavaScript to our Web pages, we now have the power that we never had with HTML and CSS. We can change all the HTML elements in the page. We can change all the HTML attributes in the page, change all the CSS styles on the page, remove existing HTML elements and attributes. Add new HTML elements and attributes. And JavaScript can also react to existing HTML events. Or it can create its own HTML events on the page. Now some of these things, like changing CSS styles or HTML attributes and elements. Well, we could kind of do them before, but with JavaScript weaken. Do this while the user is on the page. Let's look at the diagram. We requested the HTML, and then the Web browser saw the link tag grab the CSS and before we use javascript. If we wanted to change the style or change how the a she male Look, maybe we want to click on the about page. Well, we would request the HTML and the CSS all over again to change how the webpage looked. But now, with Javascript, all you need is this. And JavaScript can do that all for you. If you want to do all on the same page now in this section, we're going to learn all of that. In order to do that, though, we must go back to our diagrams and understand two things. One is the Dom, and the second is the JavaScript engine. Up to this point, we spoke how html gets requested, then CSS. Then the browser does something special. It creates something called the Dawn. That kind of looks like this. When a webpage is loaded, the browser creates the dom, which stands for document object model. You see over here that we have document with the root element HTML. We have a head element body element with some a tax and h one tags. What does this really mean? You can actually see the same thing in the console. So let's check that out. So the dom or the document object model is simply document. So over here, if we open up the document, There you go. We have the same thing that we saw in the elements. Stab. Let me close the style over here. Right in the console. Now, why do we need the dog? Well, we needed a way to get change ad or delete html elements. So the day almost created so we can do something like this document dot Right, Lou? And watch what happens to the webpage. It changes to Hello. So the dom is something a browser creates to allow us to modify the HTML and CSS. Okay. Now, what about the other phrase that I mentioned the JavaScript engine? Well, up to this point, we talked about how each browser loads up JavaScript and it magically reads it. What does that even mean? Well, each browser has a thing called job script engine, and they all have pretty cool names. Chrome has a V eight engine edge has chocolate core. So far, he has nitro s, and Firefox has spider monkey. And what they do is they're the ones that look at the JavaScript file and read it line by line and execute the JavaScript. So how do these to tie together? Well, now we can use job script to talk with the dunk. You see, when we did document dot right, that was JavaScript, wasn't it? That looks like an object. And it will had the right method that accepted an argument. Hello, Web browsers allow us to access the Dom through the document object, and that's what it is. It's an object. And now we have the power that we mentioned before to do all these sinks to essentially modify how our webpage looks. So knowing what we do document is the screen that we see in the browser right over here. And the document, as I mentioned, is Justin object now. Does it have a parent object? Well, as a matter of fact, it does. It's called a window, and you see, over here a window is on object with a whole Thanh off properties. But if we scroll to here, we see that one of the properties is document, and it even highlights it for us. And if we open up the document it has more properties. Also, remember alert and prompt. Look at that. The window object has alert. So let's try something. If I did window dot alert, Check, Check. Well, this still work. Let's see. Yep, it still works. The reason that alert work like this was because Window is you can think of it as the big parent of everything in a browser window is an object that describes this browser on any time you use a method like alert. If you don't specify anything, it assumes that you're talking about the window object. The biggest parent. But remember document dot bright. Could we do that on the window? Object. Let's check this. I get in their window. Die right is not a function because it doesn't exist as a property of window. It exists as a property of document, which is a property of window. So let's recap. A Web browser has a window object that has a property document that specifies what should get displayed to decide what to get displayed. The document object the document object model Risi a Shyamalan, CSS and then Javascript that is red line by line by something like a JavaScript engine in Google Chrome. That's the V eight engine Reese through it. And if it ever needs to change anything, JavaScript can speak with the document object and modify the HTML and CSS. So, using our newfound power in the next video, we're going to start manipulating the Dom to make our websites more interactive with JavaScript. Let's get started, Boeing. 2. DOM Selectors: Welcome back in the last video, we talked about the document object model, and some of you might have a question. Well, when he showed me window, it looked like an object. You have properties and methods, but whenever we access the Dom the document, well, it doesn't look like the object does it. It looks like HTML. And that is because Web browsers just hide the fact that it's an object. They just give us a nice view like this so we can play around with it better. But it is a JavaScript object. Now, with this document, we can use something called selectors to select different elements that we can manipulate them. So I'm gonna show you a few of them today, the ones that are used most often that you'll encounter in your day today. Web developer role. If you go to document the first on I'm going to show you is get elements by tag name. Has the name suggests it accepts a tag name? In our case, if we look at our index dot html file, well, I've created for you a shopping list and if I minimize this just so you can see it We have a simple HTML file, and it looks like it's an important shopping list. It might be somebody's birthday, and they're getting a notebook. All right, so with the tag name I can say, Well, what tagged I want to select. I want to select the H one tack, a breast center. And look at that. I get the h one tack. Okay. What else can I do? I can do documents dot Get elements by class, name. And here I can say within the index file, I have class second, which is theseventies paragraph that says no excuses. So I can say, second, I look that now I have a second element. What? Also, you half get elements by I d. I think you can guess what this one's gonna dio document dot Get elements by i d. Again, we're going to select Heidi off. We see that there's a first year so we can do first and I get the i d. Now you see one difference here that get element by I d doesn't have the plural s rate because you can only have one. I d. It returns the full element versus what looks like an array. So in order for me to actually fully access the above, I'll have to do second and then access zero index of the race, in which case I get no excuses. All right, so these three are very, very useful. But there's something called quarry selector and quarry selector, all which are even better. Let's check them out with document Doctor Query. Sir Lecter, I can select anything inside here like I did with CSS. For example, if I wanted to select for the stew in this case list to each one, Well, I can select H one if I wanted to select Ally her list items. I get a lie, but it looks like I only get the 1st 1 The notebook. What if I wanted to select all of them? And that is because query selector selects the first item that it finds. If I do query selector Oh, on the other hand, it's elects all of them and you see over here that we get all the six ally elements just to show you that it works with any CSS electors. If I do ally and h one, well, I get the h one and all the allies as well, so it's very, very useful. The one caveat, as you know by now, is that whenever a new features introduced, we got away for all the browsers to implement it. So let's check. Can I use to see if query selector is in good standing? All right, it looks like all the browsers have implemented it, which is good. Let's check Quarry selector All All right, we get the go ahead, everything screamed. That's good. I want you to get used to that practice of making sure that whatever methods or properties you use both for HTML, CSS and JavaScript, everything is working and the browsers. So I recommend that you use these two to do your selection because it's exactly like CSS. They're more powerful than the 1st 3 But you will encounter these three every once in a while with the older code basis. Okay, what else can we do? We can see that we have get attributes and set attributes. Let's check it out. As the name suggests. If I do document get attributes well, we see that there's nothing on the get attributes. Is there because you need to select on element in order to get its attributes, Let me explain. So if I wanted to get the random 23 number from the first ally, well, I would first have to selected. We can use something like query, selector and since will select the 1st 1 I can say Ally and I get it. But remember, we have to store it somewhere, so I could either give it to a variable and stored somewhere, or I can just directly say, get attributes random So we'll say I'll select the ally. And from there I'm going to get whatever attributes that is called random. And then I got 23. So get attributes can be anything in picture, an image tag that has with and height, and you want to grab the maybe the width and hide to see what values half we'll do with them. You can also set the attributes. So if I press up and I get the last command, I can now change. Get attributes to set atrophy to now say of random, which is the attributes that we want to grab and what we want to change it. We can say we want to change it to 1000 close the bracket and I get undefined. But now, if I select the quarry selector in the first ally, I see that random has now been changed to 1000. Now you might be thinking to yourself with this, Can I add a class to maybe have a new style and change some CSS? Well, you absolutely can. That's one of the cool things with having the Dom is that you can change anything in your Web browser. So let's try a few of those you can use get attributes or set attributes, but I want to show you the more common way off doing this. The first way of changing your style is simply using the style attack. So, for example, if I wanted to say query selector hoops, I want to say document dot query selector and will select the H one tag. This H one tag also has a style property and all elements on the white page have the style property, and here is a whole bunch of stuff that we don't need to worry about. But what we can do is say style and then dot we want to access a property on the style, which is, well, R c ssl. So we know that we can have background so background we can say equals. But should we say we'll say background equals yellow, but it has to be a string great. So yellow strength press center. Look at that. We just changed our backer and you can do styles like this and change all of your styles. But there's one issue here. The issue is separation of concerns. We ideally don't wanna include styles, which what we've done is essentially stall equals background yellow. It's the exact same thing that we've done. So fight, Refresh. Here. You'll see that even though I haven't changed anything, I still have the yellow background. But as we remember, we wanna have that separation of HTML, folks says on the text. CSS focuses on the style and JavaScript on the actions. So what's a better way for us to do change styles other than style dot property? Well, we have a few things that we can use, so we'll start off with class name and class list, and I actually have a pretty cool style cold, cool title. So let's check that out. I want to remove this fresh? Yes. So let's put the document quarry selector. Each one in a variable so we don't have to keep doing this. So I'm going to say variable. Each one equals. There you go. So now we have each one we can say h one dot plus name equals and we'll add cool title. Let's see what happens. Whoa, that's pretty cool. Great. In case you're wondering how I did this, will I just use this CSS? And the way that I found it is I looked at this coat, Ben. So if you search code ben dot io, you can find a ton of cool things that people have built with CSS. And you can see that this was done by Rafael Castro. I just used his cool CSS for my h one tag. And there you go. So I've added and you class to my H one. If I select my h one, you see that I have a class cool title. Very nice. There's actually another thing we can do. We can do class list. So let's say that I wanted to add a class to al. I will say document dot query selector we'll do Ally, which will select the 1st 1 And I want to say that here we wanna look at class list. I see that well, there's nothing because there's no classes. But if I add a class here, analysts too bold bread and we don't need that comma. So now we have to class items. Well, if I save and we do this hope and refresh, I see that I have a list of classes. This class list gives us a few methods that we can use, such as Add Remove and Tuggle. So let's do that. Let's do the ally and I'm gonna say class list pad and we'll add cool title. Look at that. That kind of messes up our list. So let's remove the cool title and add a different one. So I'm gonna say class list, remove cool title And instead let's add another class that I have in my CSS, which is called Done that will give me a line through the text so that the to do item is done. So if I do done look at that, I have my first ask on my shopping list. Done. But what if I made a mistake, and I wanna toggle it back. Well, instead of removing, I could just say Tuggle and toggle again and toggle and toggle and toggle. You see that this might be quite useful if you want to turn something on off, on off, back and forth. Very cool. What else do we have? What so far, we've learned that we should use quarry selectors to grab the element and change the styles using something like Class list. Let's make sure that class list is available in all browsers. Let's check class list, and it looks like we're getting green. But there's a few such as I E. 11 that has partial support. So we want to be careful with using class list, so we might have to use some Celtics in some areas. I have a few more that I would like to show you. One is inter html, and I have here dangerous. You'll see, and then some cold basis. And this is why I want to show you this property. I can do something along the lines off document dot selector Each one now. Within this, I can say inner HTML equals. Was this strong exclamation marks and then close the strong data. And now for press center. Look at that. I've just changed the inner HTML of H one to have strong tax. Let's double check what h one looks like. Now each one has strong tags with exclamation marks. Let's go back. We can also access something called Parent Element and Children. So let's check that out If I want to select Jello documents dot query selector Fall Ally will select Jello which is the second and the race. So that means one and I have Jello. So now I can say dot parent element and I get the in order list And if I do the parent element off the parent element, I get the body. So I have Jello I get the parent which is the U. L and the parent of parent, which is the body. I can also do Children. So if I do this which is parent parent which goes to body and then Children, I get all the Children of the body Very cool. The last point I wanna show you is that it is really important to cash selectors in variables. What does that mean? Every time we do something like this. Let's say we had a JavaScript file, and every time we're selecting new thinks whenever we want to use it, well, this is using up memory because the computer has to remember the browser has to remember that we want to select this and then we're selecting you again. And then we're selecting again and we're selecting the same thing. So the Web browser is doing actions over and over. When all we had to do was variable, each one equals document. Doctor, quarry selector, H one. So now, anytime I need to use H one, the Web browser doesn't have to go look up the Dom, find a Chuan and then stored in memory. We have H one living until we refresh the page so that the Web browsers work is done. It already told us where h one is, and now we can use it. And that's cool, cash selectors. And it's something that will cover in the last video in this section, where we talk about some developer fundamentals I'll see in the next video, but by 3. DOM Events: Welcome back. This is the part that gets really exciting. You can use JavaScript to listen to events and act based on what the user does Now. What do I mean by events? Events are things like clicking most entering or hovering over something, or user trying something in a search bar so we can listen to these events and react to them using JavaScript. Let me show you how we have our old shopping list from the previous video. And if I add a button here, I will just say, Click me, Save and refresh. We have the Click Me Bun. I've also created a script dot Js file here in the same folder as index dot html, and we obviously want to add it so well, do it right on the bottom, as we have mentioned in previous videos, and we can include it by referencing it through the source, and we'll call it script dot Js to reference name on the script. Let's save now learning what we've learned, we can select this click bun. Let's test this out. If we want to select the button, I can say document dot get element by tag name and we'll save button, so that selects the bun for us. Okay, so how can we listen to the fact that a user can click this button? Well, we have something called events and what these are, and I'll link. The reference here is there are a whole bunch of events that a Web browser allows us to listen to. So if you look over here, we have mouse events like most move mouse over click DoubleClick. We have key press and a whole bunch of other events, but the most common ones and the ones that you'll see 90% of the time are most events and keyboard events. So if we look over here, we have a click so we can listen for a click. How can we do that? Well, in my script ball, I'm going to say Document. Well, let's call it one equals document dot Get elements by tag name and we'll select the button . Now that we have the reference to the button, I can now say fun dot had event listener, and this is a method that we can use and it accepts two parameters. The 1st 1 is the event in our case, we're listening to the click event, and the second parameter is the function or what we want to do based on the click. So in our case, we can just say console dot log click. So we're saying, had a nev event listener to this button that we've selected whenever the user clicks. I want to run this function, and this function is to console, log, click. Let's see if that works and refresh and we see that we have bun add Event listener is not a function, and that is because remember, get elements by tag name returns on array off buttons. So if we copy and paste this, we see that in order to access the button, we have to go zero to access the first element in the array. So that's a very common mistake that people make some. Make sure that if you get this error, that's probably because you're trying to use a method on an array, and you need to use that method on the actual element. Okay, let me close that and fix this to say the 1st 1 Perfect. I'm gonna save make that a little bit smaller, Siegen. See and refresh and I'm gonna open up the council on Let's see what happens when I click. Click, click, click, click, click. Okay, so it's working. We're listening to the click event. Very, very cool. I can also listen to something like my center, another e over here and refresh. You can see over here that as soon as I do most center, it registers event. You can also do mouse, leave, refresh. And every time I leave, I get that event very cool. So there's a Thanh of them. I will link to this so you can check it out yourself. But like I said, keyboard events and mouse events is what you would like to look at. So looking at this list, I think we can improve it. I think we should have an input and a button where we can type in something and add to the shopping list. So let's try and do that and want to erase this code, and I'm going to save and refresh, and we're also going to change a few things here instead of click Me the button. We want to say enter and we'll give this. But in a class of enter and we also need an impulse. I'm gonna remove this p tag. And instead of the no excuses, I'm going to say input type text. If you remember, that's the default. And we can also add an attribute placeholder enter Hi items. So now if I save and refresh Look at that. I have a placeholder and I can type in whatever I want for right now they don't really do anything. Ideally, when we click enter, it gets added to the bottom of the list. So how can you do that? First, we're gonna need to select these items. So the one thing I really like doing is making sure that we have good class names or I DS for these elements so that we can grab them easily. So we definitely want to grab the button which has a class over enter. But I actually like using I d. Because it will be really, really fast for the Web browser to grab an I. D. Because there's only one of them performance wise. Although it's very, very minuscule, it does help. So I'm gonna change that to idea of enter and we also want to grab the user input so we can give it an I D. Of user inflict. Now let's open up our script at Js file and think about the things that we want to select. We want to select the input and the button so we can do that by signing them to a variable document dot Get element by i d. And here we can just say enter. Remember we assigned that I D and input will be document that get Helaman by i d. And we'll dio user input here. And we want to add an event listener to the bun. So let's do that. I'm going to say button dot had event listener. We want to listen to the click event and we want toe perform the action the function For now, before we get into the actual code, it's always good to test what we've written so far. So we're just gonna do consul dot log Click is working. Let's save open up the console and refresh, and if I click, Click is working all right. Everything's looking good so far. Ideally, we can enter something here, and when I click enter, it gets added to the bottom of the list. How can we do that? Let's think about this. The first thing we want to do is we need to create another ally element. So whatever we enter should be added to the bottom of candles. We can use something called a create element method so we can do variable Hell, I equals document dot Create element again. Another method that document gives us. And in here we just tell which element we want to create. In our case, it will be a list. An ally. Okay, now this ally we've just created that lives in this variable we want toe attach it to the bottom of list Again, the document object gives us something called upend child. So if I dio alli dot upend child now in here in order to upend a child, If we remember our old diagram off the dom, we see that each element has a text. What we call note. So we need to add a text note. Let's do that here. We'll have to do something called document create text node. And in here we can just say testing. So now we've attached testing to the ally that we've just created again going back to our diagram. I've created an ally element, and I've added the text off test. So the last thing we need to do is to Attash this too theon ordered list. Right now, what we've done is we've created on Ally that says testing, but this is actually not attached to anything. It just lives in our program. But we need to attach it toothy on ordered list. And the way we do that is, well, we grabbed the UN ordered list and then append to it. So again, we're going to select Hon ordered list document dot quarry selector, and we'll select to you well, And now we can say I wanna append so append a child to you l that is l I what we just created. So let's see that in action. I'm gonna save and refresh. I'm gonna close the consul and in a press enter. Look at that. It's working when you refresh that again. There you go. So this is working and we've learned a few new things here. One is that we can create a new element, so we just give it the tag that we want to create. But this element needs to. Well, if you want to display something, it needs to have some sort of a text inside it. So that is this over here. And the way that the document object model works is that in order to create a text, you do create tax note and put whatever you saw you want inside of it. Now we've created this ally, but we need to attach it to something that is part of the actual view right now. In our case, we want to attach it to the UN ordered list and use a pan child, which, as it has a child, these three are quite useful. So you'll just have to practice them and remember them. But we have something working here, which is good, but ideally, we can put something that we enter in here. Not just a static testing. So how can we do that? We have the input already grabbed. And the way we get the value from one input is input dot We don't need the bracket, Seymour its input dot value. And we could just test it out over here. Console dialogue. I gotta refresh if I click Enter, I get hello and it should also be attached to the bottom over here. Okay, so we have a basic to do list we can enter. Stuff include cancer. But what happens if it's empty and I click? Enter? Look at that D C. That just keeps adding stuff on. Ideally, we can skip that. If the input is empty, well, enter shouldn't do anything the way we do that. Well, it sounds like a conditional statement might be useful here. We can do if input dot value is well, what can we do here to test? If you remember, we have length property on strength. The length property tells us how many characters a strength has so we can do something along those lines to say if input value doll length is greater than zero, then we will move this in here. Otherwise, well, otherwise we don't really need to do anything. We'll just let that clique event happen without any actions. Okay, so let's see that in action to save and refresh, and I'll do nothing and press center nothing. Press center. Nope, but if I type something, it added to the list. But here's another problem. I can just keep adding thes forever. Ideally, after I enter something, it all clears up. So let me refresh. And here, what can we do at the end of all of this, where we can se input dot value equals on empty strength? After we create the new ally and added to the UN ordered list, I want the input value to now be completely empty. An empty strength. Let's save and refresh. Let's try that. Hello, Click Enter. Look at that. Now I have to type something. You again. All right. Things are starting to look nicer, but it's kind of a knowing that I have to keep clicking. It would be nice to just also be able to press enter right again if we look at the events. We also have keyboard events and key press. Well, as the name suggests, listens to some sort of a key press, and luckily for us, we can just listen for the enter key for the return key. Now, how do we do that? Let's give it a try. First, Let's just copy and paste this And this time on the input I'm going to say, Instead of the click event, I'm gonna say key press. So we're listening for the key press event and we want to do the exact same thing that we've been doing, so that works. So how do we know when the enter key is pressed? Well, we have something called character codes and that is we can listen to which key was typed and each one is associated with a code with a number. So this website again, which will link to I can just press for a key here and I'll tell me exactly what Coded has . So for a press enter, I get Kiko 13. So we're listening for key code 13. But again, how do we access that? If I open up the consul here, I'll show you that the way we do it is that we listen to something called event dot which and I'm going to console log this now, in here. I'm gonna comment this out for now so you can see every time on event. Listeners added, we have the key press and this function also receives a parameter automatically. That is the event, so we can call it E. We can call it event. In my case, all colon event. And now, when the user presses a key, it gives dysfunction and event off the description of that event that happened. Actually, religious Consul logged the event and see what it is. I'm gonna refresh and se key press and you see that I have the keyboard event and here I get a whole bunch of information about the event that I just did even get the time when I pressed the key. But the thing that's really important here is we see that there's key code, and there's also which both of them 107 If I press enter, we see that the key code is 13 which is 13. Let's give it a go. I'm going to say now that if input value is greater than zero and event dot key code equals 13 then add the item to the list. Let's save and refresh. Give that a go. I'm gonna say shopping lists will need pence a press center. Look at that. Unless to yo yo added to the list. Awesome. Everything looks good, but there's one issue that I'm having here, and that is we have a lot of repeated code. This seems really unnecessary. And as I said before, one of the principals with being a developer is dry, which stands for dinner. I repeat yourself. This is not very extensible, is it? It looks like we're just copy and pasting code. And imagine if we had a bunch of events. This will just be a massive file. So let's extract some of this logic out and show you how we can do something called Re factoring, which is making code look a little bit better. One thing we can do is that it looks like in our if statement, we're doing the same thing, which is checking that the input value length is greater than zero. So we can add a function here called and put length. And as the name suggests, this checks for and put dot value don't length. But remember, as a function, we need to return something. Otherwise well, we're gonna run this function, and it's going to say on defined and undefined cannot, well, undefined greater than zero. That doesn't make sense. So return the length. So now again, we've extracted that out so we can just say and put length. Run that function, whatever your returns is a greater than zero and we'll do the same over here as well. Now that is a minor change. But now we have something that we can use everywhere. Any time we create a new event listener, what else can we clean up? It looks like this whole block of code is being repeated here. So again, we can call function, create a list element here. We can just remove this. Code added here and now we can just say create this element and again remove this and say, Create this element. Let's just save and see how everything works. Right now I'm gonna refresh. Make sure the consul doesn't give me in years and I'm going to say shells. And if I press center, everything still works. And in case everything's empty, I can't add anything. Alright, the codes looking nice. It reads pretty well. The last thing maybe I want to do is instead of having the function here, I can extract that out as well. I can say function ad list after quick, and we can just say, copy this function out and add it into here and we don't need this function anymore. And now We can just say Add list after click and we can also have function pad list after key press. And here's the tricky part. Now we have to copy this, but before I delete this function, you see that we need to receive an event with this so it has to receive a parameter because we need that information from the event. So again we pass it event. Remove this function and we have event dot key code. Let's see if everything works as expected. I'm gonna save, refresh, see if there's any errors in the console and press water that's water juice has juice. And if I don't press anything or don't enter anything, it still works. Let's look at this code one more time and see what's happening. We started off with selecting the elements that were interested in and notice here that we're not constantly every time we need them saying document, get element by D were cashing this. So the beginning when the script runs were saying Hey, remember this I'm gonna use it and started and button and same with the input. Same with Ian ordered list. We then have a bunch of function declarations But these air never run because they're just saying, Hey, we have this function But nobody has around them yet and the program goes to the bottom and says, Hey, at an event, listener for click If anybody ever clicks on the bun, run this function. And if anybody ever has the key press on the input called dysfunction. And now every time I click, this gets triggered and it goes over here says Hey, his ample length greater than zero if it is, create a list element, and here it is. And if I ever have a key press it checks to see if it's the input is greater than zero. Then I checked to see if I press the enter key and then I create a list element and this looks pretty clean, right? Anybody can calm. And if they know a little bit of JavaScript, you can greed what is happening just from the code. And that is something you really want to strive for, where you don't want to repeat yourself. You wanna cash these queries so that we're not using up too much power for the browser, and we have everything broken down into functions that are very, very simple. Okay, that's it. For now. Add any shopping list items you need, and I'll see in the next video. But by 4. Exercise: Background Generator: welcome back. So far we've taken a look at how JavaScript interacts with HTML and CSS, and we've seen that we've been able to change text change styles and interact with our webpage in this video. We're going to try something fun. We're gonna have an exercise where we're going to create a background generator so that for our future projects, we can have a nice, awesome Grady int for our backgrounds. We're gonna use just a few lines of javascript to create this. So let's get started. All right? We have a beautiful blank canvas here. No, open up the console so that as we write code, make sure we don't make any heirs. We're going to start off with a simple HTM Alfa. We'll call it radiant. That ground and within the body will have a few things we'll have in each one that will say background generator and will also have. And each to that will say current CSS background and we'll have an H three that will be blank for now because we're gonna be putting the CSS style so that people can copy and paste the back on Grady in from right in here and Obviously we need JavaScript, so we'll add a script tag and we'll do Source. He close to script thought Js Let's refresh Now I want to show you to cool things that comes with HTML and CSS. The first is the MPA type collar, and the second is CSS is linear ingredient. So CSS three has these cool Grady, um, backgrounds that we can do so we'll use this syntax to create our ingredient. And for the color picker will use the HTML type color for the input to get a color picker so we can do that fairly quick. Let's go right below the H two and will create an input, and the type will be color. Name will be color one, and we can actually also give it a default value. So we'll do value and we'll just put in a random hex color will do through zero FF Sears here, and we wanna have to color pickers because the way Grady its work, it goes from one color to the other, so we'll put another color picker. We'll save change the name to color, too. This time this color will have more red and refresh and there you go, we have our color pictures. Now the one thing I want to show you I created a style sheet that I'll provide for you that will have some default style. So it looks really, really good. And we can include that in our HTML file. I will say link style dot CSS And if I refresh well, we got an awesome background with our cool front and everything centered. But let me just show you quickly what made the background have this Grady int. All I did was half the background Lini. Urgh! Radiant. And you go two and give it a direction. We want to go to the right and we give it the starting color and the ending color. So that's the default color that we have. The rest is all just font and texts aligning so nothing too crazy nothing that you can do yourself. But the one thing that we need is this needs to be interactive. If I pick a color here, well, I wanted to change same for this one. And ideally, if I find a background that are really, really like for my app, I can print it out over here so I can just copy and paste the men of your ingredient and use that. So let's work on that. What do we know so far? We know that JavaScript can read from the Dom and it can affect it. So we wanna read what the value, what The colors are of both inputs, and we want to put out a piece of text at the bottom here with those values in the CSS format. So it looks like we'll need to select two inputs and then also select the H three so we can enter some text here. Let's go to the script Js file. And the first thing we want to do is we want to select the H three. So we'll do bar CSS equals document. I thought Corey Selector. And because there's only one a street, we can just select h three. Okay, We also want to select the colors and we should give it a class just so we can distinguish them. So I'm gonna say class, he cools color one and the other one will have class caller to. So now we can do variable color one. He cools document Corey selector and we'll do color one again. It's a quarry selector. So we do class selector, just like we do in CSS and for color, too. We do the same thing. This looks good for now. We ideally gravel. These and our backgrounds should change. Let's check out everything and make sure that we are correct and we'll be done so far. Let's refresh the page. And there, you know we have Rh three. That's where we're gonna wanna have our CSS text for a background. We have our inputs, the 1st 1 and the 2nd 1 Okay, it looks like we're doing everything right now. What do we want to happen? We want to listen to an event where we noticed the users actions here. We've learned about click and Mouse Center and key press, but this isn't really any of those, is it? Well, there's a really, really good event for inputs, and it's called input. So any time the input value changes, which it does, every time we change the color, we can detect that. So let's think about how we would do this. We wanna have color one to have an event listener that will have input, and it will have a function that for now we can just Consul Donal Logue color one dot value Then we also want the second color to have the same thing. But for color do Let's refresh and check. We can remove the consul logs because we don't need it anymore. Refresh and let's see. Look at that. You see that in the console? This is getting updated. That's pretty cool. All right, so the first ones working the 2nd 1 that's working too awesome. So we're grabbing the collars, the color dot value. What do we want to do next? With this value? Well, we want to change the background color. And how can we do that? Well, the background. If we right click and do inspect, you make this bigger this bigger. We see that the background is in the body tack. So ideally, we change this. Let's go back to the console, minimize this and let's try and change the background. Now with the information that we have any time color, one changes, we want to grab the background stop well again, we can say body equals document thought, get get element by and lets out an i d here. Well, say Heidi, radiant. And we can say Get element by I D and will say radiant again. We want to make sure that we're actually selecting it. So let's try body and refresh. All right, we're getting the body tag. And if we remember, we can change the style of the body by doing style. Thought, background. That's Ah CSS property. And we can just say red. Let's see if that works. All right, we're changing the color to red, but that doesn't look as good as ingredient. But at least now we know how to change this so we can say when the first input changes. Body does background port style dog background equals pullin year radiant to right, and there's just a syntax you'll have to get used to. And we'll say The first scholar will be color. One thought value, and we'll need a common for that. And the second value will be sad, a space here collar to dog value. So that's the second color picker and will say, plus close a bracket, and the CSS ham should be good to go. And I put this on a new line just so you can see it perfect. And again, JavaScript doesn't see the semi colons here, so it just keeps reading line by line. Okay, so let's save and see if we did that right now, I'm gonna refresh. And actually, you don't need a semi Colin here, So let's see if that works. I'm gonna refresh so like the 1st 1 and look at that. We got ourself the Grady, um, working. But obviously, we need to do the 2nd 1 as well, because right now it's just consul logging again. Let's do the same thing. And to the second color picker, my safe and refresh. You pick the 1st 1 and we pick the next one. Look at that. That's really pretty. But that should have triggered something. We just copy and pasted the same lines of code. And if we remember, that's a big problem, because dry do not repeat yourself. So how can me extract this function? So that is a lot cleaner. Well, very easy. We can create a function and we'll say, set Grady int and said Radiant Will has a new suggest set our beautiful Grady int. So now this function can just be called set radiant and same floor. The second color can say set Radiant. Look how much cleaner that looks. But let's see if everything still works. I'm gonna refresh. I'm going to select on. Looks like we broke something. Uh, see what we did here. This event of import gets triggered automatically and runs a function. We don't need to call the function because this input event is triggered automatically, and the second parameter automatically gets ran with the event. So now if I say this select one, everything works again. Just to reiterate if we had called the functions like these, the first passed through when the HTML documents loaded it reads the script file and it goes through the lines. And when we at the event listener, we also set the greedy int. But we want this to be called every time the input has selected. So again, part function is now like this, and we have ourselves beautiful back on generator. We're actually going to use this when we design our final project because, well, I think the backgrounds look pretty cool with this thing. Very cool. And you see how easier that waas fairly fast. Just a few lines of code. I want to show you one last thing and that is we've been using ad event listener, which is the recommended way off doing things because we're keeping the JavaScript and the JavaScript foul. But we could have also done within the input a non click attributes or on input attributes . So within here, I could have said because we have this available to us, said Radiant. I could have said said grading. And also on the 2nd 1 you would do set radiant. We'll see if this works. If I comment thes out so I never add the event listener and I refresh. See, that is still changes. What is the difference between doing this and doing it this way? Well, the difference is that here were adding JavaScript to HTML against separation of concerns. And also you can see here that we can only add set Grady int so this input can only have one on input attributes versus here, where we can keep adding different functions, different events. So this is a lot more extensible. But I wanted to show you that you can do that and you can do it on click function is just a HTML specifications. When we get to the React section, you'll see that it has its own way of doing the step of events. So again, I'm gonna restore that refresh back to how are beautiful website. There's one other thing that we need to do, and that is we need to have the CSS of the bottom written here. That's very easy to do. We can just say CSS dot text content, which is new. You haven't seen it before, but you can just say body dot style dot background and we'll add the semi colons if I save and refresh. Look at that as we pick the Grady int. We have this updating now. A few questions. You may have one. What is this text content thing? Up until now, I've shown you inner a CML. I also So do you create text node and now we have text content. There's so many things to remember. What is the steel? Well, it adds a text content. As you can see, there's many, many ways to add things to the dog, and the reason I did this is because I wanted to show you the frustration that ah lot of people had in early two thousands when working with the dog in the next video, I'm gonna talk about some of those issues and what we did to resolve them, and eventually when we were getting to react, we'll see that we actually won't be using any of these because react has extracted all of these out for us, so that it's a lot simpler than figuring out how to enter text content, adding event listeners and all this stuff that can get frankly, pretty frustrating. A types that's it for now. Let's see what else you can add on to this background. I'll leave the code for you in the next section so you can play around with it and make it even better than it is right now. I'll see you the next one, but why 5. jQuery: when I teach students for the first time don manipulation and events, it's always overwhelming. It takes a few tries to really get it. And one thing you may have noticed in the previous videos is that there were a lot of methods that you learned, and the dom has a lot of them, but you constantly have to check and see if it was compatible with the browsers to make sure it works. So we used websites like Can I use dot com to constantly check that we can use those properties? It was a tedious process. A few years ago, the support for these selectors and dominant ablation techniques were even worse. For example, quarry selector now is all good. But a few years ago, only a few browsers have them. So what did people do if it was even worse than it is now? Well, there was a library that was created that solved this huge problem, and that was Jake Re. You might have heard of it. It's one of the most popular libraries for JavaScript. In 2000 and six, J Career E was introduced to the Web development world. It was a library which means it's just JavaScript and JavaScript file written by a few people that added a little bit more to the language so you can do more. Thinks you had more properties, more functions. Its main goal was to make Dom manipulation easier and compatible with all browsers, so they took care of the hard work and browser compatibility issues. Isn't that nice of them? Let's check out this W three c example of J. Cree. You can see over here that they're loading a script AG with a cdn that is pointed at J Query notified JavaScript and J Query is just this snippet of code. It always has the dollar sign document dot ready. Which means when the document the Dom object is ready run this function and inside of it you could write all this Jake weary. So in this case, you can see that we want to select P. This was a J coury specific syntax and on click run this function. So it was the exact same thing as when we did p dot had event listener, and then we would do click and then do some sort of a function so you can see it made things a little bit cleaner to do, and you can do things like this dot high. So if I click over here, it hides that hides. It hunts. That's pretty nice. But Jake Weary had a one issue. It made the code very imperative. And what does that mean? It's a word there you're gonna hear a lot. When you become a developer, you means that you had to tell the program exactly what to do. One by one. This may not seem like a bad idea, but when your websites get big and complicated, it creates a huge mess. One action is dependent on one action, which is dependent on another action, which is dependent on another action. Now you lose track of what is happening, more ears and more bugs into your co base, and it becomes really, really complicated. Let me show you an example. We have a simple J coury code here where we say again, document ready function, and then we're selecting article left section. When the click happens. Then we check. This has a class and we remove class, and I mean this doesn't look that bad, but it got two points where you had cold like this called Pyramid of Doom, where if this happens, you do this. And if this happens, you do this. And if this happens, you do this. And you can imagine if there was another thing that was listening to another event that might have unexpected consequences because this is running and the user is at the same time interacting with the Web site and you can see here how much of, ah, messages. I mean, this is Ah, this is just a example. But you can see that it's very imperative this happens. Then do this and within it. If that happens, then do this and so on and so forth. It creates a big mess when you have big websites. J. Coury was great at the time. He made JavaScript really popular because it was finally easy to make interactive websites and it did a lot of great things for the industry. However, as time progress, people found new and better ways to do things. Web browsers adapted new things like query, selector, and we even have a website. Now that compares what you can do with simple JavaScript in html and what you can do with Jake weary and most of the things well you can do in both end, it's not that different. As ties progress, people found new and better ways to do things. You still have Jake weary being used today, but they're fewer and fewer people starting projects that are using Jake. We're right now. As a matter of fact, the number of job postings with Jay Correa's requirement has really gone down. And there's rather a negative view of developers who Onley no Jaquie. This is not to bash a library. It was an important part of JavaScript growth. But in 2018 it isn't that useful of a skill. That is why, in this course, we're learning react. React is a library that solves the huge problem of J query. Instead of being imperative its declarative, we will get into Mawr of the benefits and what that means when we get to the section. But having a historical perspective off where we were and where we are now is important. So remember this First we had a she male, then CSS and JavaScript. Then came Jake, weary to make our javascript easier. Then came more libraries that may JavaScript even more fun and easy to work with. From now on, we won't be using don manipulation techniques we have learned in this section. Bummer, I know, but I'll show you what we can do better. So stay tuned. It gets way more fun after this. I'll see in the next one, but by 6. Developer Fundamentals: V: Welcome to the fifth developer. Fundamental. You're still going strong and I'm proud of you. You just got through the toughest section, which is dominant relation. But before we get going, I want to talk to you about another developer Fundamental, which is accessing the dawn. JavaScript and sorry, I think we got John. How's it going to you and what army? How right back to where we were talking about JavaScript in the HTML May things on the Web very exciting with all the things you can do. But it also introduced a whole slew of problems. One was inner HTML. Here. Every time inner HTML is set, the HTML has to be parsed a dom constructed and inserted into the document. Now what does that mean? Well, we need to recreate this tree and then added to the Web browser and then have everything in here show up on the Web page. I mean, Web browsers air fast, but they still have to do work. This takes time, for example, if elements, let's say here has the tag A and there's thousands of these in the dawn tree. If you call this dot inter html, it's going to cause the parson to re parse everything all over again, and this could break references to maybe click, advance and cause other chaos. In reality, all you want to do is attach a single new element to the end, and Inter HTML is also susceptible to some attacks. Cold Cross I scripting, which is a security problem. Now, as more and more websites try to make their weapons do more than just show a page, think a Web app like you Demi here. There's obviously a lot more going on than just text and style. They access the Dom and change things quite a lot, but this is a huge performance problem. In the previous videos, we learned that we want to make performance and fast websites in this day and age by minimizing the amount of back and requests we make. So if you remember, we learned that location of servers important. How maney trips we make to grab all the files is important and the size of the files matter . Now in this lesson, we want to minimize the amount of Dom manipulation we make. If we change, let's say one drop down. We don't want the whole page to re render. We want toe, have an interactive website, but not necessarily make the Web browser work because we're constantly changing things to the document. Object. Let's see what I'm talking about by showing an example. If I open up the consul here, and I could actually press escape and you'll see that it toggles a new bar and you might not see rendering, you might have to click here and select rendering. You'll be able to do something called paint flashing. And now, if I minimize this every time this turns green, it means something's being repainted on the webpage. And you can see over here as I'm scrolling through everything, all the green actions happening, and that's a lot of a lot of things. And you, Demi does a good job of making sure that when I do this Onley, this section that I'm actually touching gets gets painted. So play around with that if you want and check out some different websites. Some websites you'll notice when you scroll. It re renders the whole thing instead off just the bar, as you can see here. But that is your lesson. You want to minimize the amount of dom manipulation and events. It's a very important concept in building Web apps, and you also want to be smart and use the best methods to minimize this Now. Luckily for you, that is exactly why I react was created. You'll learn more about it in that section. But get excited. It's gonna make things really, really fast and really simple to build. Okay, that's it, for now, until next time. But by