Today I'll be talking about JavaScript for beginners, and yeah, let's go. We use justfiddle.net. In this environment, if you're clicking the top right settings, you can adjust the layout. I'm using classic, but you can choose other kind of layouts if you don't like this one. Okay. So HTML is for the structure of a document while CSS for the style and visuals. Now JavaScript is to make things interactive. We used to have very static websites in the early days, but now they're very interactive and we have social media apps and all this stuff. So a lot of JavaScript is involved in that. So how can we start? Let me make a paragraph here in HTML. So we have the HTML panel here where I can write HTML. We have the CSS panel where I can type some CSS and here I have the JavaScript one. And if I click run in the top left, I can see the results of my code. So we have a paragraph. So if I wanted to change the color in CSS, I could simply do, if I want to target all the paragraphs, make them rather do it like this. That's cool, but how can we do this with JavaScript? So let me show you. So first of all, in JavaScript, first you've got to always target the element you want to manipulate. So the paragraph, that's what we want to manipulate. Now we need a way to find this element in the whole document. Remember, I'm doing things very simple here. There's only one element, but an actual real page has many, many, many elements. Some of them nested inside others and so on. So I need some kind of identifier to find this. And the easiest way I can do is if I add an ID attribute to this paragraph, let's call it paragraph. And go to the JavaScript. So in JavaScript, there are several, there are things called objects. And one of them is document. If you want to ask the document to do something for you, you can type document dot. So an object is like a real world object. It has attributes, like a car has attributes, right? It's color, it's make, and so on, what year. Now the car also has some things you can operate on. Like you can drive the car, right? You can turn the engine on. You can turn the windshield wipers and so on, air conditioner. So we're going to ask the document to operate on something. So we're going to get element by ID. So these things are called functions because they do something for us. The function name is get element by ID. And it's important that the naming be exactly like that with the first G lower case. And then the word element, the first letter is uppercase. And by an ID also uppercase the first letter. This is called the camel case naming convention. So we need to type exactly like that, otherwise it won't work. So continue here, document get an ID. Every time you have a function, you have to type parentheses, open and close. And then within that, we can pass optionally things to the function. In this case, okay, I need to get an element by ID. I need to know what ID. So that's what the argument here is. Now the argument is what we type for the ID attribute value for the P. So we can use that like this, but I need to add either single or double quotes surrounding it. Because if I don't have that, it's going to think it's something else. If you want the literal word paragraph to appear there, you need the quotes. Okay, and these things are called strings. Strings are sequences of characters. Okay, so every time there are quotes surrounding some sequence of characters, that's a string. Okay, so when we say okay document, which is kind of represents the whole document here, I need something, I say dot. So this get an element by ID belongs to document. So it's one operation we can do. This function got an element by ID. Once given an argument, in this case, the ID of this element, paragraph, it's going to return us literally a reference or think of it like as a hook. That's tied to this element here. So we can operate on that. And one of the attributes of this paragraph, it's actually an object as well, HTML element, is that it has dot style. Okay, dot style is like all the CSS properties of this thing. And the other, you can say dot color, like that. Now, if you just say like this, you're going to access the color, style of this paragraph element. Now, if I want to change anything with JavaScript, in general, we have left hand side is the thing you want to change. And equal sign, right hand side is the new value. In this case, let's add red within double quotes or single quotes, either way. Now, this is also called a string of three characters. I've got R, E, and D. And the equal sign is an attribution or assignment operator here. Now, the space between them, you don't need to have that. It's something I just add for the style. Because I think it's better visually, but you don't have to have that. The left hand side is the thing you're going to change. In this case, the color of the style of the P element. So I'm going to click around in the top left. And I can see as soon as it runs, the paragraph is now in color red. If you can see the color red. Now, what happens is it loads this document, HTML. And then it runs the code in the JavaScript part. Initially, the paragraph is going to be the standard color, default that's black. But it's very quick that it runs the JavaScript code. So you don't even notice that it turned red. Okay, and that's nice. Let's try another property. Let's say I want to change the background color. Let's say I want to change it to maybe yellow. So I would follow the same process. It's nothing tricky here. You're going to type almost exactly the same thing, except you're going to change color for background color. And the right hand side is going to be yellow. So first, we got to always go through the document. So document. Now I need something out of it, dot get element by ID. Parentheses, it's a function. All functions need parentheses to be called. It has one argument, and that's the ID, the string, paragraph. Now this gives us or returns the function, always returns something back to you. And that's something as the HTML element B. Now we can say, okay, dot style to access the object that contains all the CSS properties. And we can say dot background color. Now you notice I type background color in camel case. You know, CSS is background dash, lower case color. But when we write JavaScript, the naming convention is always camel case. So you're going to have to write it like this. Without the dash and the C has to be capitalized. Now we want to assign a new value. So we always say equal sign, and then right hand side is always the new value. And I'm going to say yellow. Don't forget the quotes, either single quotes or double quotes at the beginning and the end of the sequence of characters. Now we can see it added the background color yellow to this paragraph element. And so it goes on. You can pretty much change any CSS property. You just change style dot whatever here. And I'll always make sure to convert from the, you know, the dashed case to the camel case if you're trying to do something in JavaScript. Okay, nice. Now, let's do something more fun. I'll add a generic container here, a div. And it's just a block element. And what I'm going to do is I want to set some properties here. Let me say div background color. So yeah, I'm using dash because I'm typing CSS right now. Let's make it green. And then the width, let's say, let's try a hundred pixels and hide a hundred pixels. So I made a square out of this div. Now, what I want to do is when I click the square, I won't, first, you already know how to change the color, right? I already taught you, can add an ID, it works as any element. Doesn't matter, paragraph, div, whatever. Add an ID, document element by ID, pass the ID as the argument and then say dot style, the color, background color, in this case, equals whatever. Now, how can we do that when we click? You know, when you're on the web page, you're clicking everywhere, many things, right? So it's very interactive in the sense that when it clicks, the sense that it clicked it and it will do react to it and do something. Now, I want to do a follow, I want to click this square and I want the color to change to red, the background color. How would we do that in JavaScript? Okay, so one way is here, the given attribute to the div, let's call it onClick. So these are called events in JavaScript. And then double equals and give it a value. Now, the value has to be a function, okay, which is a set of instructions that we're going to write for something to happen when we click this element. Let's call change, call it. Now, all functions we need to call it in this case. So I put two open, close. So we're going to see what, why is that? So I'm going to go to the JavaScript tab here, going to say function word, space. Now I'm going to use the same name I used here for the onClick and the parenthesis because it's a function. Now, every function body needs the curly braces here. So we type the instructions between the open and close curly braces. So this is just syntax. JavaScript is a programming language. So we just follow their syntax. This is just how things have to be. You have to type the keyword function, space, and then the name, any name you want. And notice I use the chemo case naming convention. You don't have to use it, but that's pretty much the standard that we always follow. And then the function can take arguments. In this case, there's none. So I leave the open and close parenthesis empty. And finally, we can have the body or the instructions of the function between the open and curly braces. I don't have to have space here. It's just optional, but I like to have it for better visuals. And whenever I open a curly brace, usually programming, we add what's called indentation, which is just spaces at the left-hand side. For example, I usually use two spaces. So you're going to see that a lot. And then when I reached the closing curly brace, I continued writing from the same level, you know, vertically. In any case, so I want to be able to target this div. No, I can't give an ID. Let's give it an ID. I just call it the square. Now here I'm going to say document dot get element by ID. The ID here is square, has to match the same ID value attribute here for the div. Now, once we got that, we can finally change the dot style, dot background color. Oops. And remember to assign new value equals sign. And then right-hand side, the new value. Let's say it's red, right? And you know, I put a semicolon here. It's optional in JavaScript, but I usually like to place it. Usually in programming languages, many of them, when you finish a statement, you finish with a semicolon. Okay. Now I'm going to click run, nothing happens, right? But I click the div and turn red. Now let me click run in the top left to reset. Now why does that happen? Well, we have the on click attribute passed to this div, which means, okay, when I click anywhere within this square, I want to call the function change color. The parenthesis here is important because you want to call or execute the instructions for change color. Since we define change color in the JavaScript section here, it's going to go and run every instruction between the open and closing curly brace. In this case, this instruction here is to change the background color of that div whose ID is square to red. So if I click that, becomes red. So that's called, these are called events. So there are many kinds of events. This one is click, but there could be, you're typing something in a form and you move your cursor away from the form, control the input and so on. Or you move the mouse over an element outside an element. All of these are events. You can have the event for the form submission. You can have the event when you press the key down and so on. Does anybody have any questions so far? Did you go over that just one more time, a little quick? Yeah, yeah, yeah. Is there a specific part you don't understand? Just the entire function. Once you add an attribute, in this case, on click to the element, what's going to happen is when I click that element, it's going to try to see what to do. Okay, you give me something to do when I click. And that's something that's what we call the function. We can call or execute a function. A function is a set of instructions that you can write so that the computer can do. So in this case, I say, okay, the name of the function here is change color. And the parentheses are necessary because they are mean execute or call this function. And we define the function in the JavaScript panel here. To define a function, you have to write the word function, space, and then the name of the function. Now this name has to match the same name we gave in the value for on click. And then you define the rest of the function. By definition of JavaScript syntax, the arguments are things you can give to a function if it needs anything at all. This one doesn't need anything. Therefore, we leave the open and closing empty, meaning I don't have to write anything inside, right? So I can just leave it empty. Now the instructions are always placed between the open curly brace and the closing curly brace. So I can write whatever here as long as within the open and close. And all these lines will be executed. The moment I see the function name and the parentheses, the computer Cs, right? So when I click, okay, let me reset. Click, okay, call, change color, goes here. Okay, change color, starts from the top, do this line, and then it changed the color. And once it reaches the curly brace here, the in curly brace, the function is done, it's over. That's it, I don't need to do anything else. Obviously here I just want to have one thing to do, but I could have instructor number two, another instructor here, a fourth instructor here, and so on. So what I would do is go line by line from the top. Okay, do this one, then once I'm done, do the following one. Okay, do A, and then do D, and then do R. Okay, I reached the end, this is the curly brace marking the end of the function body. I'm done, and that's it. Obviously this is a very silly thing I'm kind of doing, but I could write in CSS. Yes, I can write in CSS, but I wanted to demonstrate how we can manipulate the document to your own liking, okay, using JavaScript. All right, I'm gonna go one. Now to do the image gallery thing, I need to introduce concept of variables. Remember how we had before for the paragraph? ID paragraph. The paragraph. And I was changing the properties, and I wrote it twice, one for the color, one for the background color, yellow, and you can see the paragraph, oops. Paragraph, paragraph, paragraph. Okay, you can see the paragraph there. Notice I wrote the same thing twice, right? Which would be kind of tedious if I keep writing the same thing over and over. So if you don't want to write the same thing, you can actually store this value somewhere to be reused over and over, and that's the concept of variables. So the syntax is const space, oops, all your case. Any name you want, let's say paragraph, paragraph, element, and then double equals, and then the right-hand side is what you want to assign to this variable. Let me copy this. So let's walk through this. So whatever is returned by get element by ID, and this is the P, we can store that somewhere to reference later. And to do that, we do use variables. So I created this variable, I call it paragraph element. You can call it any name you want. The syntax is, like I said, they have an equal sign, the right-hand side is the new value, and the left-hand side is what you want to assign to. Now we need to have the const because that's the syntax for JavaScript. Const meaning this is something constant that is only defined once. Once we have this name, we can reference anywhere we want. So in this case, line three, when I say, I can have this, you see it's the same thing in the right-hand side, right? So I can replace this whole thing with just paragraph element, okay? Notice there's no quotes around it because this does not mean literally like the word paragraph element. This means something special, and that's something special is the paragraph element variable that stores reference or pointer, something that's pointing to the paragraph element here. Okay, so that's why before I told you about strings, that if you want the literal word red, for example, you have to have the quotes. Otherwise, it would think, oh, are you trying to, it's trying to think, where's the variable called red? I don't see it defined anywhere previously, okay? So you always have to have quotes around it if you want the literal word red. Now, you see, we did line four, the same thing. So we can just reuse that variable. So what happens here, more details, is it always runs the program from the top to the bottom, right? So we're in line one, and okay, we get the element by ID, and we put that inside paragraph element. Now, the benefit of doing this is we only do this operation once, whereas if you had this here, line three, line four, it would try to find the element once, it would try to find the element again twice. So it's doing two separate operations. Whereas if I have the variable, I only did it once, and I don't need to do that operation again. Go through the document, you know, search for that element, and that's another benefit of variables. When you want to reuse values, you don't have to compute them again or do an operation again. Also have some readability. You know, if you name your variables a very descriptive name, so usually you want to give a very descriptive name for the thing you're storing, to actually mean it, right? Don't write just, okay, I'm going to write variable A, and then say A.sylvia.color, what is A? This is not a good name. Because you don't, when you read it, you don't understand what it is. You know, you have to dig through it, and take a lot of time just to understand what this means. That's why we always want to give the script the names to variables, so we understand right away what they mean. And actually, we could also use this here in this function. That's totally fine. I'll teach you another way of practicing JavaScript if you open your browser developer tools. The hotkey is usually F12, press F12, or if you cannot open that, right click anywhere in the browser, press inspect. Okay. And then we can click the console tab here, and start writing JavaScript, actually. You see, this is a prompt, and it can start writing JavaScript. You can actually do like one plus two, three, you know, three times four, and so on. This is just JavaScript running computation for you. Okay, we can define strings, you know, like we did, hello. And it just returns you back the same thing. You can make variables like we did, const, paragraph, text, hello world. And if I say paragraph text, it gives me back what I stored. So I can write it many times, it always gives me back what was stored. Be very careful when you're writing all these code. Every character matters, the case matters. If it's uppercase, lowercase, if there's a punctuation, everything is very, you know, strict, and it matters. Okay, I'm going to continue because we need to get through arrays. So when I want to store, I taught you how we can store one thing. Like I said here, paragraph text, I can store a string. You can also store numbers. Let's say a equals three. And if I say a, notice I omitted const here, but usually you need to add that, okay? It's just because we're in this environment of, you know, type something, get something back. So that's a, it's always going to give me back three. So I can say, okay, let b be four. So whenever I say b is four, right? So if I say a star b, that gives me back a, which is a variable that stores the value three. Therefore you can think of it as, okay, go whatever a is storing, I'm going to place it here, three. Okay, now b is another variable, it stores the value four. So whatever b is storing, I place it here. Now I can do the operation three times four, and I get back the 12. So if I revert and have a star b, that's 12. Obviously I like to add space before and after the operator. In this case, the operating is the star, the multiplication. That's just for style or visuals. I think it's better to visualize at the eye. That's the same thing. Okay, so variables store something. Now what if we have a collection or list of many things? Would we, obviously we can create a variable for each, right? Okay, I'm going to say a is something, b is something, c is something, but that's kind of tedious. Isn't there a way we can group them all together into one single variable? Those are called arrays, okay? So if I say list equals, and the notation here is square brackets. Add the open and closing square brackets. And then within that, you can type the list separated by comma, for example. I can type three comma four, and then comma, I don't know, seven. If I do that, I get back what's called an array. You can see here array. And the browser is so nice that it can kind of do this thing of unfold and see, okay, three, four, and seven. Now an array, it's kind of like a sequence of things drooped together. And okay, but how can I access each thing? These things are called elements, okay? In this case, we have an array called a variable called list that holds an array of three elements. The first element being three, the second element being four, and the third being seven. Now if you want to access any of them, you have to say first the name of the variable, followed by square brackets, and then you have to give the index of the element. Now every element has an index, but you have to count it from zero, okay? We don't count it from one, it's zero. So if you want the first element, you have to say zero. So when I say list, square brackets, with the zero between, that gives me back the first element of the array, that's three. If I want the second element, okay, that has to be, okay, zero and then one, one is the second, right? Index one. Do I say list, square brackets, one, that gives me four, and then the third element has to be, you know, list sub two. It's always minus one, right? Because we always count from zero. Let me make this bigger, so you can see the array there. Okay, so those are arrays. If you want to count how many elements they are in an array, obviously here I can see it's visually at three, but within the computer, you're not gonna be able to see it visually, and the computer cannot rely, the computer cannot rely on you to always be there to count it. So we can say list dot length. Remember the dot notation we saw before, document dot something? Yeah, so you can ask the array, hey, what's the length by saying dot length, and it gives you three, three elements. So these are very basic access things we can do. Now if you want to assign a new, change some element, like remember, let's change the second element, which is index what? Second is two, two minus one is one. So I can say list, brackets one. Now I can use this equal sign, and then right-hand side is the new value. Let's say, make it eight. Now let's access list. You can see now that the second element's been changed to eight. Following the same pattern we learned before, of the assignment operator here, the equal sign, the left-hand side is what you want to change, the right-hand side is the new value. Be careful with the equal sign here, because you know when you think of equal, we think of comparison, right? Something is equal to something else, but in this case, it's not a comparison. It's an assignment or attribution. You're assigning a new value to something. You're changing something to a new value. So be careful, there's always a difference. After you learn later on JavaScript, you're gonna see two equal signs together, and that's a different thing, okay? That's comparison. It's not assignment, but the single equal sign is assignment. Whenever you need to assign some new value to something, just do it like this. Okay, once we get this out of the way, how, okay, I got a question from Nata. How can we add more elements to the list? That's called a push operation, okay? So you can say list.push, and then parentheses. Push is a function, and it needs arguments within the parentheses, and you can add maybe like, let's say one. What happens, it adds to the end of the array. So when I say list, I can see the one there. Okay, it's a push. You're pushing something to the end. Okay, it's always the same, usually the same pattern. You have something, you wanna operate on that, dot, name of the operation, parentheses. If you need to give something, provide some additional information, you just sew within the parentheses. Now let's talk about making a gallery. Let's delete everything here, everything here. I need an image, so, okay, I got one image here. So I'm gonna add an image source here. Alt, you know, bad image. Now it's too big, so I wanna give maybe with 100, hide one, let it be changed automatically. Now that's a little bit bigger. There you go, have a picture of a dog. So I posted it in the Zoom chat, the link I use, but you can find anywhere, go on your search engine, find a picture, copy the URL from the address bar after you've viewed the picture. Anyway, so I wanna add a button here. Element, button, type button. And I wanna see next, image. And let me add a div so it goes to a new line, even though it's there because it's too, you know, I wanna make it in a new line, so just put a div there, like that. Now let me remove the CSS, I don't need that. There you go. Now, we have an image rather button, so we need to implement, when I click the button, I wanna change this image, okay? I wanna change it to this other image I'll show you right now, I paste in the Zoom chat. How can we do that? Well, we learn how to listen to click events, right, before what we do. Okay, we need to find the element we wanna listen for the click, in this case, the button. I can add on click attribute. And I can say here, the name of the function we want to call execute when we click the button, okay? Let me say change image. And then we need open and close parentheses. Don't forget, because we're calling the function. Now we need to define the function in JavaScript, the function keyword, space, name of the function, change image, parentheses, curly braces, and type the instructions between the open and closing curly braces. I like to add indentation, which is the two spaces to the left, just for style, you don't have to. But it looks nice, so I can see that all these statements are enclosed within this function body. When I say function body, I mean the things between the open and closing curly braces. Now nice, how can we change this image to something else? Well, the attribute that controls the image is source, right? If we change source to something else here, like I say I go here and copy and paste, that changes it, right? But how can we do that in JavaScript? Well, first we have to select this image. Now I taught you how to target or find this element by ID. Somebody asked for query selector. Query selector is another way of finding an element. So let me teach you how to do query selector. I'm going to say document. Now I can say dot. Okay, what do you want out of the document? Well, I can say get element by ID. That's one way. Or I can do query selector. Query selector is a very convenient way of getting things. I wasn't going to talk about it, but since you asked about it, I'm talking. So it's always the same way. Call it with parentheses, and it needs the argument. It needs to know, okay, what do you want to select? But in this case, let's make it simple. I only have one image in this page. In the real world, this would be many images, so we wouldn't really do what I'm doing right now, but I'm just going to select by the name of the element. And if you click runoff, it's going to happen because this is grabbing that element here. Now query selector is only used to grab one thing. There's another one called query selector, all that grabs many things and kind of returns an array-like thing. You know, array, right? We just learned multiple things in one thing. So query selector for one thing. Now, once we got that, okay, I got the source, right? So I think we could just say, actually, let me teach you how you can figure it out. Can I teach you DevTools debugging? That might be hard. Let me do console, log this, and show you something. Let me see if I have the console here. One moment. It's kind of hard to see. Let me see if that, that's way too many things. Okay. Let me try, see if it works in the, no, it doesn't work there, only here. It's hard for me to do the thing I wanted to do because it's within this environment here. But anyway, I just wanted to show you that this is pointing to the element and a way to find out what attribute I would change. Let me search for an image of a dog here. So we have this dog, right? Let me open new image in the new tab. What I'm gonna do is open the DevTools. I can inspect this. I can right click and let me see if it has something into the variable. Yeah, let's do the query selector, document.query selector. Image. So you can see when I say document.query selector by the element name, it returns the image here. This image, we can go here, I press the up arrow in my keyboard and it can say dot. And there are many things that suggests out of this value that was returned. And I can look up for things that are of interest. So I can confirm, if I scroll all the way up, these are all the properties and operations or functions we can do on this element. And I can confirm that, where is that? SRC to CSRC, that's indeed here. So I can click that and write that down. And I can assign a new value. Obviously I put ABC there, which doesn't mean anything. So let me put that other value that I pasted. There you go. Now that's a valid URL. So let me try to summarize here because I might have gone too fast. We use document.query selector. We can query by the element name, as you can see, img. And it will find the first img element on the document. And to that, we saw that we can find out what properties this thing has. And one of them is SRC, which is the same thing as the attribute for the element that we wrote in HTML. So if I wanna change that, I can just do equals sign. Right hand side is the new value. In this case, I changed the image source to be that of the cat. So this is precisely what we're gonna do in our code. Okay, so I'm gonna go back to our code. And I don't need this console log anymore because I showed you with the dev tools. So we're gonna say, I wanna change the source. Remember, what we're doing here, we wanna click next image, the button. So we wanna change this image to the image of the cat. So I can see dot source. In this case, it's gonna be that URL of the cat, but I have to have what? Quotes, the rounded, either single or double, doesn't matter in this case. And I always add semicolon to this outer habit, but you don't need to. And when I click next image, it changes to the cat. Right, remember, you could be Facebook, Instagram, whatever or a news website. You often see these galleries, right? You click and now the images appears and click and now the image appears. It's the same mechanism. We're just manipulating the source attribute of the image and change that to a new value. So the button has a on click attribute. That one we click, it calls the function change image that we wrote in JavaScript. So it goes here, okay, it starts on the top. Okay, get element, not by diva, I'm using query selector. We're gonna find, okay, go through all the hodl document. The first element that's image, I want that to be returned. I got a reference to that. Okay, I'm gonna change the source attribute to the new URL. Does somebody else, would you keep writing semicolon to keep adding photos? Yeah, so that's what we're gonna do next. Of course, we could hard code all the things, but there are smarter ways to do about it. For example, how can we keep track of our image where are right now? That's the big problem here, right? We need to know which one is gonna be. So we're gonna talk about that next. Have you ever asked dot class is a class, correct? That depends on the context. If it's writing CSS, when you start dot, that's a class. And also the query selector, you can actually write the same selector for CSS here. So if image, you had a class, say, the image, you could actually do in the query selector dot, meaning find the element that has the class called the image. That's the same thing. If I click run, you know, and I click, it works the same way to select the element, right? An element can be found through many different means. You can find it by its name, you can find it by a class that it has, or an ID, or maybe an attribute, and so on. Does that make sense of you? All right. Okay, so how can we kind of click next right now? It keeps, nothing happens visually, right? But actually we keep calling the same function every time I click, and it's changing the source to the same value. If I click, same value, click same value, the cat. How can we kind of alternate that and change it to something else? Maybe change it back to the original. That's when arrays come into play here. Whenever you have lists of things, arrays come into play. That's why I had to teach you that. So let's create an array here outside of the body of the function. So I can go outside here. Either it can be either after it or before, let's do before. So first to create an array, square brackets, this means array. Now we can start writing the elements. Now the first element I want to write is the first image, which is the string for the dog. Now notice I wrote a string as the element of the array. When I taught you about arrays, I used numbers, right? But actually an array can hold any kind of data. Can be number, can be string and other things. So the first element is going to be this string with the characters for the URL for that dog image. Now I want to add another element here. So I add a comma and the second element is the cat. So I'm going to take this URL of the cat, copy and paste here. Remember the quotes because this is a string sequence of characters. Now this is all in one line and that's perfectly fine for the computer. But for us to visualize it's kind of hard. So I always like to break a line here. So one per line is easier to see. And usually what we do is we add indentation that is some space to the beginning of the line because that gives us a sense of kind of, you know, okay, this thing is within the square brackets, there must be elements within the array. It's not required just for style, code style, so you can better see with your eyes. Okay, so this is an array, but we need it to store it somewhere so we can use it later. So to store things in an array, put the equal sign there and then the left hand side has to have the name of the variable. In this case, let's call images. It's rather, a better name is image URL. You know, I wanna call image URLs, okay? Now URL is like what it's the name, technical name, abbreviation for this thing, right? HTTP, whatever, whatever, for the address there. So that's why I call it that. Now we need cons here because of syntax. Okay, this is a thing that we define once, we don't need to redefine it later. Okay, now what can access it from anywhere? So here, let's say I wanna change that to the array. Remember, this is an array of two elements. The second element is actually the same as this string I typed here in line seven. So how can I use that array, the second element? Remember, the name of the variable is image URLs. And then if I wanna access something, I put square brackets and the index there. Now it counts from zero. So the first element is index zero. The second element, the one that we want is index one. So I can say one there. So when I say this like this, what I'm doing is okay, it's gonna take, okay, variable image URLs, this is an array, it's gonna go here and okay, zero, one, second element, it's gonna take that and imagine it was being replaced here. Right, the same thing we had before, imagine. That's what it does. So if I click run, next image, the same thing happens, right? Nothing changed, even though we changed the code to use the element from the array, right? The string for the kitten. How are we doing so far? Any questions? Can we go over that one more time? Yeah, so right now I'm building some momentum for us to be able to sort like alternate between the images. So in order to do that, I need to use arrays. Arrays is a data structure that allows you to store more than one thing consecutively, sequentially. So in this case, when we have square brackets, that's the punctuation that denotes, okay, we're gonna make an array in the JavaScript programming language. So the first array can have many elements, right? The first element is this thing. And this thing can be a number, can be a string, whatever. Remember, string is a sequence of characters. How we are, wait, are you referencing line one? What do you mean? I'm right here in line two in the JavaScript panel. And the first element is this string for the URL for the dog image. And then the second element, we separate them with a comma, remember? We have the second element with the other string with the URL for the cat. So this thing is a list of two things, two elements. Okay, I'll explain that in a moment, what the brackets one mean. So we start this array in a variable that we call image URL. So that we can use it later. So in this case, the later is when I click, next image, it calls the function here. So what's happening is I'm referencing the images URL variable, which in turn is an array. So you can think of this array here being replaced here, like that, okay? So whenever you have arrays, if you wanna access an element of the array, like the first one or the second, you have to do so using the bracket notation like this. So square brackets, index, close square brackets, the index of the element, meaning, okay, which one is it? Because there's many, right? So we gotta count from the top, from the beginning. The first element is this one, but that one has an index called zero, right? So we start counting from zero, not from one, but from zero. So the first element, its index is zero. Now I wanted to access the second element because that's the URL for the cat, right? So I say second element, but index count from zero. So zero, one, right? So it's second, think of two minus one, one. So that's why I have one here, that the index of the element you wanna find in the array. Yeah, because all I'm trying to do is replace what we had before with the same thing, but accessing from the array. We had this before, right? I just wanted to access from this array instead of hard coding or writing explicitly there. Now, once we got the second element, now we can figure out a mechanism to keep changing or alternating the images, right? I could have another image. Let me add another image here to the, let me find another image so we can add. Let's say I add a third element to the list of image URLs. I just add the third element, okay? If I wanna access that, that would be what? Index two, because we count zero, one, two, right? Three minus one is two. Nice, now we got three images, we wanna make it gladly. If I click next, it's always gonna be the cat because it's always changing to the second element. So we need to find a way, okay, can't we find a way every time we click? It keeps alternating the number. Maybe the first time I click, it's one. The second time I click is two. And then if I click again, obviously it would go three, but that's wrong, right? But let's just keep it simple for now and just increase that number. So we need to find a way of doing that. So we can actually come here outside of function and make a variable to hold the index of the next element. Okay, let's say current index, that's the name of the variable. I'm gonna assign a number, you wanna say zero, okay? So this is gonna represent, okay, in the images URL, right now the selected image is the one of the index zero. So this is a variable. Now this variable, every time I click, I wanna change the index. The next time I click is gonna be one, and then two, and so on. Now because it's a variable that changes value over time, it's not a const, it has to be a let. So we have to write let there because we're gonna change it later. Now every time I click next image, I need to do the following. I take whatever current index is, right? This case is zero. I need to add one to it, so plus one. Now I need to make the new current index to be one more than the previous. So I can say current index equals that. So what is it doing? Okay, the first time we click, what's the value of current index? That's zero, right? We always read these things from the right, okay, in this case. So it's zero. So zero plus one is one. So one becomes the new value for current index because remember, when you have equal sign, whatever's on the right goes to be started on the left. So current index is redefined as one when we click. Okay, let me revert that. This is what this means, right here. Now, once we have this new value, we can use it as the index here. Instead of one, I can say current index because that in itself the first time is gonna be one, right? So I click run, click next image. It still changes. You can see current index internally is going to be one. So if I click next image again, it should be changed to the elephant because the current index will come here. Okay, current index is one. One plus one is two. Therefore, the new value for current index is two. Now two goes into what is here. So I select image URLs two, which means the third element, right? Because we got a count from zero. And it takes the URL for the elephant and places it here and sets the new source. Let me revert my code to what it was before. There you go. Okay, click next image, click next image, elephant. Now the elephant is like too big. Maybe I wanna define a height for the image here. So oops, maybe I liked 100 better. Anyway, just for the sake of not having too big there. So you can always have the same. Now one thing I didn't teach you yet is if I click next image, what's gonna happen? Somebody guess. It's on the third image right now. Current index should be zero, one, two, right? What happens if I click next? Okay, if I click next, what would be the new value for current index if current index is two right now? It's not gonna go back to zero, right? Because we're saying plus one here. So if current index is zero, one, two, it's two. Plus one is three. So if I click next image, it's gonna be three. Oops. Now if I place three here, there's no such thing. No fourth, right? Always plus one if you wanna find out what element. I can count zero, one, two, and then there's no fourth element in the list. Therefore it's like, okay, I don't find anything here. Undefined. So there's no image. How can we go back to the first one? Well, we have to reset current index to zero, right? That's the problem to solve that. But how would we know? Well, there are many ways to go about this, okay? I don't know if you know about the module. Let me just quickly do it and then we will end this lecture. If you do division, you don't know if you know about module. This percent operator here. Module like, you divide by something and take the remainder. If I do one divided by three, the remainder is one. Two divided by three is two. But three divided by three, the remainder is zero. And if I do four, oh, one, five, two, six, zero, oh. You can see it always becomes zero, one, two, zero, one, two. Which is perfectly what we want. It keeps, you know, zero, one, two, then goes back to zero, one, two, zero, one, two. This is one way we can do this. So for this mathematical operation here, I'm going to do the following. I'm going to module with, in this case it's three, right? But I could add many elements here. If I do that, like I add another one, not a one. That's no longer three here. That'd be two, five, right? So in order for us to not have to hard code the number there, I'm going to say, okay, this is basically the length or number of elements of the array. So I can say imageurls.length here. And that will always be the exact number of elements. No matter if I place four or five or six, it's always going to replace here with that number. So I don't have to hard code it. If I do it this way, it goes back. Elephant, dog, cat. Elephant, go back to zero. Dog, cat, elephant, go back to zero. All right? So that's the power of the module operator. Just divide and take the remainder. The remainder will always be within zero, one, two. Repeating as, you know, as the index increases. Okay, so that's the image gallery. And I challenge you to do the back button by yourself at home. It's basically taking current index, subtracting one, very similar, subtract one, but then you've got to be careful. Just do that one, subtract one. Once you've solved that, you can do the, going back from, you know, if I put negative one or whatever, I would solve that problem. That one is easy to do. You know, just check if it's less than zero. You know, it can go back. And actually, if you click back, do you want to go to the last or do you want to stop? There's two ways, right? If you want to go back to the last, you can check if it's less than zero, the current index. You can set the current index to the last element index, which is what? Imageurls.link minus one. Imageurls.link minus one. So these are my tips for you if you want to try the back button. Well, that's it. Thank you so much. I'll see you on the next one.