JavaScript

For this lab, we will use a method that returns an array. In the lecture, we saw that this method returns a sorted array:

var sortedValues = reversedValues.sort();

Now, let's use a method that can return an array as well. Actually, the return value is a NodeList, but we can treat it like an array for this lab. We will get back all of the anchor tags on a webpage. Let's create a variable called myLinks and set it equal to a method called document.getElementsByTagName. You will need the var keyword, the name (in this case myLinks), the equal sign, then the method call exactly as you see it below:

var myLinks = document.getElementsByTagName("a");

As you can see, we are not using an array object to get this method. This is a method that belongs to a document object. We will go into more detail into the document object soon, but for now, think of the document object as your webpage. I am asking the webpage to get me all of the elements on the page that have a particular tag type. In parentheses, I provide the type "a" for all anchor tags.

Here is how I use it on the page: http://explorecalifornia.org

Then, I check the length of my newly created container and display the result with console.log. It shows that there are 20 links on this page.

console.log("Links", myLinks.length);

Finally, I check the contents of one of the elements of myLinks. Since I expected that the getElementsByTagName would give me all of the anchors on the page, then one element will be one of those anchors. I decided to display the 4th anchor with this statement:

console.log(myLinks[3]);

This is the anchor tag that is stored in index 3:

Now it's your turn. Find a webpage that you like. It could be the explorecalifornia.org page or any other page of your choosing. Play around with the document.getElementsByTagName method to see what you can get. Then, return to this lab to complete the requirements below.

Challenge:

Create a JavaScript program that includes the following:

A function called anchorTotal that uses console.log to display the number of anchor tags on the page (see the example from the practice above). Call the anchorTotal function.

A function called anchorList that uses a loop to display all of the anchor tags on the page with only one console.log statement. You can choose which loop you prefer. Call the anchorList function.

A function called anchorReverse. You must use a backward loop for this (do not use the reverse method for arrays). The output of this function should display all of the anchor tags in reverse order. Call the anchorReverse function.

If you like to write your code in Firebug, make sure to copy and paste all of your working code into a text document

Regardless of which tool you use, the final JavaScript file should be named anchor.js and remember to include a comment at the top that has the url for the webpage you were using to test your JavaScript.

Upload your anchor.js file below!

Hint: The forward loop and backward loop from the lecture and handouts entitled JavaScript Arrays (with Loops) can be incredibly useful for this lab, but they only loop through three elements. To loop through the entire container, get the size of the container using length, like this example that returns the length of myLinks:

myLinks.length

So, to continue the loop until you get to the end of the array (and stop at the end of the array), you can compare your index i to the length in your loop, like this:

i

Remember, because the array indexes all start with zero, the very last valid index number is the length minus one. You will need to use the last valid index in your backward loop.

For example) var singleValue; singleValue = 99; var multipleValues = []; multipleValues[0] = 20; multipleValues[0] = 50; multipleValues[1] = 60; multipleValues[2] = "mouse"; console.log(multipleValues[2]); var myelement = multipleValues[2]; var collection = [50, 60, "mouse"]; var myArray = new Array(); var myOtherArray = Array(5); console.log(myOtherArray.length); console.log(multipleValues.length); var fiveArray = [5]; //value 5 not size console.log(fiveArray.length); console.log(fiveArray[0]); console.log("Forward Loop"); for(i = 0; i = 0; i--) { console.log(multipleValues[i]); } var reversedValues = multipleValues.reverse(); console.log("Forward Loop of reversed Values"); for(i = 0; i   explorecalifornia.org C Search FIND YO TOUR EXPLORE CALIFORNIA TOURS Explore our world your way 17 et > >E! Console* HTML CSS Script DOM Net Cookies PSearch within . A Clear Persist Profile All Errors Wa Run Clear Copy Pretty Print History var myLinks 1 var myLinks-document.getElementsByTagName ("a" a")H.. .ik console.log ("Links", myLinks.length); 3 console.log (myLinks [31) myLinks.length): console.log (mylinks [3]) Links 20