• We'll use the first file you created in this lesson called 'lists.html', so open that file in Visual Studio Code.
• Create a file called 'lists.js' in the same directory.
• We'll also return to jsfiddle to try out a few things.
• We'll start with a blank slate for this, so if you have anything in the HTML, CSS or Javascript panels of jsfiddle, delete them.

• This will be easier to see in jsfiddle so open that page.
• An 'array' is essentially a list in code form, and it looks like this. Copy this code into the Javascript panel of jsfiddle.

cars = ['Ferrari', 'Porsche', 'Lamborghini'];

• By now you should be familiar with the form of the statement. cars is the name of a variable and it now holds everything after the = sign.
• [] identifies an array, in this case holding a list of cars.
• Each of the player names is text, so we surround them with ' signs.
• I've included names of 3 cars, but there are many more. Feel free to add any others you like using the same format.
• To be able to display these items, we need to be able to reference them.
• You've seen how to do this before. In the previous lesson, we accessed elements with specific tags using document.getElementsByTagName('span')[2]. document.getElementsByTagName is a list of all elements with the tag 'span'. [2] means that we access the 3rd item. Remember that the first is [0].
• We now need to take each of the names in this array and print them on the screen as a list. For this we'll use a 'for loop', but before we try that on this list, let's take a look at how 'for loops' work.

• Type the following code into the Javascript section below the cars array.

for (i = 0; i < 10; i++) {
}

• for is the function, which will run code inside the {} a number of times according to the rules inside () .
• The rules are in 3 parts - starting condition, continuing condition, and changes made each time, all separated by ; .
• For each of these, by convention, we'll use a variable i , short for 'iterator'.
• i = 0 means that the first time we run the code, the variable i will have a value of zero.
• We'll run the code as long as i < 10.
• Finally, i++ is the same as i = i + 1 so each time we loop through the code, we'll increment the variable i . So it will run with a value of i incrementing from 0 to 9.
• Let's see this in action by adding an 'alert' to display the value of i .
• Add the following code between the {} .

alert("i = " + i);

• When you run the code, you should see a series of popups displaying the value of i .
• Comment that out with // .
• Now, lets write it on our page directly. Add the following code inside {} .

	text += i + "<br />";
	document.body.innerHTML = text;

• Can you work this out?
• text is a variable we'll use to hold the text to be displayed.
• += means that we'll add the new text to the full string we're building.
• The new string is the variable i and a <br> tag which adds a new line.
• document.body.innerHTML refers to the entire content (body) of the HTML document.
• We'll assign string we've built (text) to the HTML body.
• There's one problem with this and if you run it you won't see anything yet.
• Our browser doesn't know what text is the first time it sees it.
• Add the following code at the top of the Javascript section (before the for loop).

var text = "";

• Here we are telling the browser that text is a variable (var of type String ( "" ).
• Now run the code and see the list of numbers from 0 to 9.

• So now that you understand how for loops work, we can apply it to an array.
• Let's edit the for loop you have already.

var text = "";
for (i = 0; i < 10; i++) {
	text += i + "<br />";
}
document.body.innerHTML = text;

• To differentiate the two lists, let's change the name of the new list to carList.

var carList = "";
for (i = 0; i < 10; i++) {
	carList += i + "<br />";
}
document.body.innerHTML = carList;

• In the for loop, the starting condition i = 0 and iterating statement i++ are still valid, but we need to adjust the continuing condition.
• I only have 3 cars in my list, so I could write i < 3 , but you may have added more cars to your list. You could change the number directly to match your list, but in the future you'll have lists pulled from databases and you won't always know exactly how many elements are in the list.
• You can discover the number of elements using .length , so let's change the for loop to the following.

var carList = "";
for (i = 0; i < cars.length; i++) {
	carList += i + "<br />";
}
document.body.innerHTML = carList;

• Run it now and see that it shows exactly as many elements as you have in your list.
• We can then change the display code to show the list item tag and the car name corresponding to the current value of i .

	var carList = "";
for (i = 0; i < cars.length; i++) {
	carList += cars[i] + "<br>";
}
document.body.innerHTML = carList;

• Finally, we need to display the items as an HTML list.
• Update the string as follows.

carList += "<li>" + cars[i] + "</li><br>";

• Notice that we're missing the type of list. Let's add an unordered list to the HTML document.

<ul>

</ul>

• Then we update the display statement to refer to our <ul> tag.

document.getElementsByTagName('ul')[0].innerHTML = carList;

• Run your code to see the bulleted list of cars.

• Let's see how this all works on a real site using Visual Studio Code.
• Just as we created an entry in <head> to link to the external style sheet, we need to tell the browser where to find our javascript code.
• Create a new line in <head> and type 'script', then select 'script:src'.
• Type the name of our javascript file 'lists.js' into the src attribute.

<script src="lists.js"></script>

• We can now work in our javascript file and the browser will find it when we open the 'lists.html' page.

• An 'array' is essentially a list in code form.
• Type the following text into 'lists.js'.

players = ['David Ospina Ramirez',
           'Johan Andres Mojica Palacio',
           'Gustavo Leonardo Cuellar Gallego',
           'Duvan Esteban Zapata Banguera'];

• By now you should be familiar with the form of the statement. player is the name of a variable and it now holds everything after the = sign.
• [] identifies an array, in this case holding a list of players.
• Each of the player names is text, so we surround them with ' signs.
• I've included names of 4 Colombian football players, but there are many more. Feel free to add any others you know using the same format.
• I've written each of the names on a separate line to make it clear. This is good practice, but it's not essential - you can string them all on the same line as long as you separate the items with a , .
• We now need to take the names in this array and print them on the screen as a list. For this we'll use a 'for loop', but before we try that on this list, let's take a look at how 'for loops' work.