Transcript Summary

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 of 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 a race come into play here. Whenever you have lists of things, a race 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 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, okay this thing is within the square brackets, there must be elements within the array. It's not required just for style, the 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 better name is image URL. You know, I want to call image URLs, okay? Now URL is like, it's the name, technical name, abbreviation, you know, for this thing, right? HTTP, whatever, whatever, for the address there. So that's why I call it that. Now we need const 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 want to change the two, 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 want to 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 variable image URLs as 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? This string for the kitten. 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, cause 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.