JavaScript in Half an Hour (Without jQuery!)

Green, hello everyone, in this video we are going to learn the basics of JavaScript. No prior knowledge is required other than perhaps an ounce of HTML and an ounce or two of CSS, but anyway, let's start by taking a look at a demo of the finished product. product that we will create together, so here is my example page, we see that this title says: click on an item in the list to replace this text and if I click on the first item, we see that the title text has been updated and selected the first element with a beige color. background and we can click on any of the other elements and the same thing happens.

The next part of the video is for when you add new items to a list with this button, whatever, let's get one another, another, another, another and another. and as you would expect, we can click on any of those dynamically generated elements and they will behave the same way. This example project may not look very impressive, but it should give us the basic components of front-end JavaScript and then you can recycle them. building blocks to create whatever you want anyway let's get started let's get height so behind the scenes I just removed all the JavaScript from the page so now all I have is a super basic HTML file with just a little bit of CSS applied. to this, which means at this point you can create a simple HTML file on your computer and follow it now, before I even jump into my text editor, let's start by writing some JavaScript directly in our web browser to do this, we can do it properly . click anywhere on the page and click inspect to open your developer tools and then I want you to click on the console tab.

I'm now using Google Chrome for my web browser, but Firefox and almost any other modern browser will have this same developer tool. features anyway from this console screen we can start typing or writing JavaScript, for example if I type 2 plus 2 and press Enter or return JavaScript will do the calculations for us. Thanks JavaScript, you are a genius or we could type 5 times 5 and Press Enter. You get the idea. Nothing we type in the console here will be saved permanently, it just runs in the browser's memory and will be lost as soon as we refresh the page, so we try two plus two.

Now let's try something a little more interesting. so the web browser itself has a lot of features and capabilities and we can access all of them with JavaScript, for example the web browser has an object called window and the window object basically contains everything that the web browser is capable of doing , if you believe it. Of the stackable Russian dolls, the window object is like the largest, outermost doll, everything is contained within it. Now in this lesson we are interested in another object that lives inside the window called document, to access the document object we can type window and then enter. with a dot and then type document, but because window is the root object, it's basically supposed to go without saying, so we don't need to type window, we can just type document now the document object contains all the information about the The The current web page we are looking at is a programmatic model of the page, so we can click on it to inspect or analyze it and here we see the HTML skeleton of the page and manipulating this document object with JavaScript is how we create our pages. comes to life, so for example look at the title of this web page, in the tab of this page we see that the title is JavaScript, we can verify that in my text editor here we see the title that I have specified, now we can access him programmatically. title with JavaScript writing document dot title and we can even take things a step further and change the title so we can say document dot title equals try one two three and now look at the page title, now let's try something a little bit more Advanced, let's try to do something with this h1 title element, so let's start by jumping into our HTML and giving that element a unique ID so we can easily select it with JavaScript, so let's give it an ID from our title and now if we go back. to the console and refresh the page, we can select that title element by starting with the document object and then looking inside it for a method called get element by ID and then opening a couple of parentheses and then opening a couple of quotes and inside between quotes we simply list the name of the id we are looking for for our title and then press Enter so that the console responds by echoing that h1 element, but you will notice that if I hover over it in the background, Chrome highlights. the relevant element okay, now that we know how to select an element with JavaScript, let's go one step further and once an element is selected, let's do something with it, so let's select the element again.

Document, get the element by ID, our title and then just wrap those elements come into the HTML property so we can set it to be the same. This is a test and when I press Enter we see that the title is updated. Now let's imagine that we want to change this title text again. I don't know about you, but me. I'm tired of typing document.getelementbyid, our title, that involves a lot of typing and gets repetitive, so what we can do instead is create a variable that we can reuse to create a variable. We just type var for variable and then the name of the variable appears we can name anything we want let's call it our and then title capital H and let's say this variable is equal to document and then let's just select it to get element by ID our title okay , now when we want to do something for the title element instead of manually typing the selector, we can just type the name of our variable, so if we want to change this title text once again, we can just say our title and then adjust its internal HTML property and let's say try one more time and there.

We have it, so at this point we have a general understanding of how Java Script can manipulate the page. I think now is a good time to exit the console and go into our text editor, where we can actually create and save a Java Script file. inside this example folder that I'm working on, I'll create a new folder. You don't need to do this. I'm doing it just to stay organized, but I'm going to call this new folder js4 JavaScript and then inside that new folder. I will create a new file, you can name the file whatever you want.

I'll call my main jas file and then I'll go back to our HTML file just before the closing body tag, let's say script and we'll give the opening script tag a font attribute. just point to that new file, so in my case go to the J folder and grab the main jas. Well, let's start by writing some code that will watch if any of these list items are clicked, and when they are clicked, it will update the title text to use it. the text of the clicked item, to do this we will have to start by selecting all the items in the list, so in our JavaScript file why don't we create a variable that will save the selection of all the items in the list. then var and let's name the elements of the variable list.

Now we know how to select a single element by ID, we say document.getelementbyid e, but how do we select multiple elements well? Instead of this method name, there is another one called get plural elements by class name, but then we need to go into our HTML and give each of these list elements a class and I think we can find a cleaner way to handle this, so why don't we just give the parent of the unordered list a unique ID? ID from our list and then back in our JavaScript, we can start by selecting the parent element of the unordered list to get the element by ID from our list and then we can chain another method that will search inside this element, we can say get elements by name from label and look for any list item element Li, okay, now we have a variable that is a collection of all our list item elements, so this single variable contains all five elements, so in the console we can write the name of our list items variable and we can see that it is an object similar to an array or a collection of items and we can access individual items in this collection by typing the name of the variable to list the items and then open a couple of square brackets and if we want to access the first element of the collection we enter a zero because arrays are zero based so we say zero instead of one so that it returns the first element and if we wanted to return the second element we would just say one, if If we wanted the third element, we would say two and so on.

Go ahead, so the question now is how can we do something with each element in our collection. Just as an example, let's say we want to change the text of all five elements to simply be hello world. Well, we can't just write list items and then change their internal HTML property so we see that that didn't do anything and that's because our list items variable doesn't point to an item, it's a joint action of references. to five different elements, so we would need to access each element in the collection individually, so we would have to say list items and select the first element of the collection and then adjust its internal HTML so we see that it worked and then we would have to do the same for the second element, so change it to one you get the idea, but we have to ask ourselves if we really want to do that five times and the answer is no, we don't want to, it's too much writing and it's very repetitive.

Instead we can have Java Script loop through our collection automatically and do something for each element in the collection, to set this up we can use something called a for loop, so let's go back to our text editor and in our JavaScript file let's write our first loop for, so on a new line, let's say for and then open a couple of parentheses, we'll write some code inside these parentheses in a moment, but for now let's leave it blank and then add a couple of curly braces and between the brackets let's go down to a new line to keep us organized now we know we can access an item in our collection by saying list items and then if we want the first item we would say square brackets 0, if we want the second item we would say 1 if we want the third item.

I would say 2, so wouldn't it be nice if instead of hardcoding a number here we could include a dynamic variable that increments by 1 each time the loop repeats? So check this out once we select a hypothetical item in our collection. so let's say we want to wrap its internal HTML to say hello world, so now all we would need from our for loop is to have I equal 0 at the beginning and run this code and then increment the variable I to be 1 and then run. through the code again and then increment the I variable to be 2 and then 3 and then 4, you get the well, that's exactly what we do inside the parentheses of the for loop, so let's start by saying that our dynamic I variable should start as 0. and then add a semicolon and now we want to tell our for loop how long it should run or in other words how many times it should repeat so we can say we want it to run while our area I've Beauty 5 because We know there are 5 elements in our collection, but what if in the future there were 6, 7, 8 or 9, so instead of hardcoding this numeric value here, we can have JavaScript count how many elements are in this collection?

We can simply say that the for loop should keep looping as long as I is less than the dot length of the list elements, let's add a semicolon and then remember how we said we want this eye to be incremented by 1 every time repeat the for loop so first it would be 0 and then 1 2 3 4, towards the end of our parenthesis here we just say I plus plus which will increment the variable I by 1 each time the loop runs so let's move on , let's save this and refresh in the browser and I see that our for loop worked perfectly.

This is great, but remember that this was just an example. We didn't actually want to change the text to Hello world. What we really wanted to do was have each element attentive to be clicked on. Let's make that happen now in our text editor, so we don't want to edit the HTML for each item in our collection, so this code will select each item in our collection and tell the item to listen for incoming clicks. We can use a method called add event listener now inside these parentheses, this method takes two arguments, the first argument is the name of the event we are looking for, in this case it is click and the second argument is what we wanthappen once.

The element is clicked, so we simply type the name of a function we want to run in response to the click. Let's call a function called activate element. Alright, I just created the name of this function as of now, this function does not exist. so now let's create it on a new line, if we want to create our own custom function, we start the line saying function and then the name of the function we want to create, so we turn on the element pair parentheses and then a curly pair . quotes and anything inside these quotes is the body of the function so that is what will actually happen when this function is executed so just as a test let's just alert a popup message that says click detected so let's check this in the browser for when I click on one of these elements here is the click detected popup and I can click on another so I will click on the last element and once again it works as expected, okay now we are detecting clicks with success on these list items. now let's remember what we actually want to do when they are clicked, so we want to update the text of this title with the text of the list item that was just clicked, so let's jump into our JavaScript and make that That happened from the beginning. at the top of our file, let's create a variable that selects the title element, so let's say var our title, we could have named the variable whatever we wanted, but then we just select the element, so let's say the document gets the element by ID and if I jump to my HTML remember that element had an ID from our title so with this variable in place now let's work on the body of this function so that when a list element is clicked we don't want to alert with a popup message, but we want to do something. to our title element and what we want to do is wrap its internal HTML, so let's set it to be the same as the internal HTML of the list item we just clicked on.

JavaScript makes our life very easy here because JavaScript has a keyword called this and JavaScript automatically fills this keyword with a reference that points towards the specific element that was clicked and then we just want to find its internal HTML property. Okay, let's save this and try it in the browser, so if I click on the second item. Perfect and if I click on any of the others it works as expected. Excellent. Next, let's set this button so that when we click on it it adds a new item to our list, so to make that happen again in our JavaScript, let's get started. creating a variable at the top that selects that button element, so var let's name the variable our button and before selecting the element, why don't we jump into our HTML and give that button element a unique ID so that can we select?

It's our button okay so this is the ID we're looking for so in our JavaScript we can just say document get element by ID our button okay so with this variable in place now on a new line we can start with our button. and tell it to watch for any incoming clicks so we know we can use the method called add event listener and it takes two arguments. Remember that the first one is the event that we are looking for or listening to, so in this case it is a click event and then the second argument is the name of the function that we want to execute in response, so in just a second here we will create a new function, we will name it create new element and now let's go down to a new line. and actually create this function, then the function creates a new element and what do we want this function to actually do well.

We just want to add new HTML to this unordered list, so if we want to manipulate this unordered list, we should probably create a variable that selects it. So before we write this function, let's go back to the top of this file and create a variable and give it the name of our list. If we jump into our HTML, we'll remember that we gave our unordered list an ID from our list, so just select that so that the document gets the element by ID from our list, so with this in place we're now going to develop the function that runs when we click the button, so we want to start with our list item and we want to manipulate its internal HTML. property now we don't just want to set its HTML to be equal to something new because that would clear or remove all existing list items, so instead of resetting this internal HTML property with an equal sign, we can add something new to it. add at the end saying the plus sign equals, so let's save this and let's test it in the browser so that when you click the button we see something new and we can click on it over and over again, let's go back to our JavaScript and tweak things a little , so we want to make sure that the text that we're adding is enclosed in a list item tag so it looks a little better and just for fun, why don't we increment it and say something? new something new tube something new 3 so to do that again in our JavaScript at the top, why don't we create a variable and call it new element counter and just set it to be equal to 1 and then down inside of our function that creates each one? new list item after generating the opening list item tag and something new, let's add a closing quote and then in JavaScript we can concatenate additional content to this string using the plus symbol and then just generate our new counter variable of items and then we want to add in our closing list item one more symbol that opens the quotes and then once this line of code is completed we can simply increment our new item counter variable by 1 so it can say new item count plus more, so let's save this and let's try it. something new one something new to something new three we seem to be missing a space between new and the number so let's add a space here perfect, and finally let's make it so that when we click on an item in the list it will be highlighted with the background color yellow or beige that we saw in the demo, so back in our JavaScript, remember that this is the function that is executed when a list item is clicked, so after this line of code, let's go down to a new one line and remember that we can access the element that was just clicked using the this keyword and if we want to give this element a beige background, let's give it a CSS class that sets the background color so that we start with this element and then we can use a method called classlist and then we want to add a class, so we say dot add.

I already have a CSS class called active that includes a beige background declaration, so let's save this and try it out perfect, but you'll notice that if I click on other elements now They're all beige, so we want that when you click on an element, becomes the only highlighted or active element, so again in our JavaScript, before adding the active class to the element we just clicked on, we first need to remove the class. of all its sibling elements now we already have a variable which is a collection of all the elements in the list, so if we want to do something with each element of that collection, if we want to remove the asset class from them, we can use a for loop now we have already written a for loop that iterates over the collection of list elements so let's just copy and paste this for loop and then paste our clipboard on this new line just in this case instead of adding a listener of events. we just want to remove one css class from each element so we start with the element and then we will adjust its class list and we want to remove a class called active so let's save this and let's test it in the browser, perfect so now just the element in the one I just clicked has a beige highlight.

Let's switch gears a little bit now, so I intentionally saved a problem for our final topic in this video, so notice if I use this button to add a new item and then click on that new item, nothing happens. This is because the new item I am clicking on did not exist when the page was first loaded and we initially created our variable which is a collection of all the items in the list, in other words the new items that were generated dynamically using JavaScript did not exist. It didn't exist when we created this variable, this collection of list items items, meaning they were never assigned any event listeners, they don't know to watch for incoming clicks, now this act of event handling for hypothetical items that might exist in the future is commonly known as event delegation, there are many different ways to handle this situation, but let me show you how I would do things, so instead of looping through our collection of list items and adding an event listener for each and every element, actually, let's go ahead and remove this for loop and instead let's add a single event listener for the parent element of the unordered list, so we already save a selection for that element in our list variable so now we have to add an event listener so add event listener we want to watch for any click event and when a click is detected we want to activate the activate element function so now click anywhere inside the entire unordered list item will trigger this function, but we only want this code to run if we actually clicked on a list item, so what we can do is wrap this code that I've highlighted inside an if statement.

The easiest way to do this would probably be to just cut and paste this content into our clipboard, so let's cut it out and create an if statement, we'll write a little bit of code between these parentheses in just a few seconds, but after the parentheses we'll open a couple of square brackets dropdowns to a new line between the brackets and now we can paste back to our Clipboard, now inside these parentheses we're going to say that only if the actual specific item that was clicked was a list item, only if that is the case, we want the code inside these parentheses to now execute our event.

The listener passes all kinds of information about the click event that just occurred and all we need to do to access that information inside our function is simply add a parameter inside the parentheses of our functions. We can name the parameter whatever we want. call it E and now inside our if statement we can say only if the target of the event that just occurred and the target is the specific element that was clicked, so only if it had an element type or a node name of list element, we can We want all of this code to fire and we'll also want to update this highlighted code a little bit because the this keyword in this context will point to the element that we assign the event listener to, which is now our main unordered list, so on this line on the right here, if we want to reference the actual item that was clicked instead of this keyword, we can use a target and we want to do the same thing on this line, so instead of this we will say e point goal and finally this code snippet that removes the active class from all sibling elements we want to update it a little bit because we don't want to depend on our list elements variable because the collection of elements in this variable becomes obsolete as soon as we use our button to add new items to the page, so we can swap list items here with a reference to the clicked item, so we want to select the parent item of that item, the unordered list, so parent node and then we want to select all the children of the element because that will give us all the elements of the list element and then again in our next line of code we want to replace this reference to the list elements variable so to avoid write more, let's just copy and paste this selector. that will give us all the sibling list items items, so copy it to my clipboard and then delete the items from the list and then just paste it to my clipboard.

Now let's save this and test it in the browser so everything works as expected and if we add several new elements and then click on them, things still work as expected, perfect and that will close this lesson, but before we continue, I want to share a very quick tip for selecting elements in JavaScript, so if your website audience uses mostly modern elements. Web browsers instead of using these cumbersome get elements by ID and get elements by tag name, modern browsers offer methodscalled query selector and query selector, all like that, for example, if we wanted to select the item that has an ID from our list, we could say document. dot query selector and this method allows selectors that look like simple CSS or jQuery selectors so we can just add a pound sign to indicate that we are looking for an id and that's it, if I were looking for a class I would use a dot .

Instead of the pound sign, the query selector allows us to select a single element. What if we want to select multiple elements or a collection of elements? Well, we ended up not using our list items variable, but let's try this as an example, instead of first selecting the item by ID and then narrowing it down by tag name, you know that's a bit verbose and cumbersome, instead you could just say document query selector. They all include a pound sign to search for an ID, say our list and then you can create a descendant selector by just adding a space like in CSS and then find any list element anyway, that's just a quick tip at the end about the query selector and the query selector, all if your audience primarily uses modern web browsers, you would go ahead and start using them today, right? that will close this lesson in our next JavaScript video, we will learn about object-oriented JavaScript, we will learn more about what an object actually is, how to create our own objects and blueprints for objects and we will learn why.

Object-oriented programming is very useful in the first place. Thanks so much for looking. I hope you feel like you'll learn something and I'll see you in a new video next Tuesday if you haven't already make sure to check it out. My new web developer mastering the modern workflow course, as always, there is a link in the description.