- [Instructor] Loops are often used to traverse arrays and perform actions on one of, some of, or all of the items within them. When we use a method like query selector all, there's a good chance we get an array of results, and we if we want to do something like run a function on an item within that array, a loop will help us go through them one at a time. In the exercise files for this movie 09 02, you'll find our trusty old Moonwalk Manor example. Let's say we want to make sure all external links in this document have their target attributes set to _blank.
For the purposes of this example, we stipulate that all internal links are relative, and external links have absolute URL's. First, we create an array inside the new variable extLinks. And here I'm looking for only links that start with http something. So I can use document.querySelectorAll. Here I'm going to use single quotes and say a, square bracket href, and then a caret. This means any link that has the href attribute starting with whatever I define, and here I have double quotes inside, http.
That will catch both http and https links. Then we can make sure we actually have a list of links, so I'll just quickly console log out extLinks. Save that, go to my browser, and open the console. Here you see we have a node list, and inside the node list, we have a series of links. Now we can set up a loop to run through each of the items in the array.
So I'll set up a for loop. And to count through the items in the array we set up the increment variable I, set it equal to 0 which is the first item of the array, then check to see that I is smaller than extLinks and its length property. And finally, increment I by one. Notice we're testing to see if I is smaller than the length of the extLinks array.
That's because the length property gives us a human-readable number of items in the array, while I is the computer index. If the array has five items, we need to stop when it reaches 5, so it's no longer smaller than 5, otherwise we run the loop one time too many. Now we can console log out the value of each of the items in the array, using I as the index number to make sure it works. Here I grab extLinks, which is the array, and then I set the index to I, save again, and now we get the actual output.
So here we see each of the lengths in turn. With the loop in place and working, we can create a conditional statement to check if the current item does not have the target attribute, and if so, apply it. So I say if not extLinks, I hasAttribute target then, extLinks I setAttribute target and value blank.
Save that. Take the window and make it fullscreen, and scroll to the bottom, and look at these links. And here we'll inspect it. And now you'll see each of these links here has a target attribute set to blank. Here's number one, number two, number three, number four, and number five. And just to show you I'm not cheating, and at the bottom here you'll see the a attributes do not have the target attributes set. That means we are looping through each of the items in turn and applying our target attribute and value, and that means our script and our loop is working.
Author
Updated
4/1/2019Released
5/17/2017Through practical examples and mini-projects, this course helps you build your understanding of JavaScript piece by piece, from core principles like variables, data types, conditionals, and functions through advanced topics including loops, closures, and DOM scripting. Along the way, you will also be introduced to some ES6 and the basics of JavaScript libraries.
- What is JavaScript?
- Working with data
- Using functions and objects
- Working with JavaScript and the DOM
- Changing DOM elements
- Handling events
- Working with loops
- Making images responsive using markup
- Troubleshooting code
- Validating functionality
- Minifying JavaScript
Skill Level Beginner
Duration
Views
Related Courses
-
Introduction
-
Welcome1m 7s
-
-
1. JavaScript: An Introduction
-
What is JavaScript?2m 38s
-
-
2. The Basics
-
Introducing the browser console10m 31s
-
3. Working with data
-
Data types in JavaScript4m 2s
-
Arrays2m 20s
-
4. Functions and Objects
-
Functions in JavaScript3m 28s
-
Build a basic function3m 29s
-
Anonymous functions5m 11s
-
Variable scope3m 17s
-
ES2015: let and const6m 12s
-
Make sense of objects3m 19s
-
Object constructors6m 16s
-
Closures8m 11s
-
-
5. JavaScript and the DOM, Part 1: Changing DOM Elements
-
Access and change elements4m 33s
-
Access and change classes3m 45s
-
Access and change attributes4m 53s
-
Add DOM elements6m 56s
-
6. Project: Create an Analog Clock
-
Use CSS to move clock hands3m 49s
-
7. JavaScript and the DOM, Part 2: Events
-
What are DOM events?1m 31s
-
Some typical DOM events1m 59s
-
Add and use event listeners6m 51s
-
-
8. Project: Typing Speed Tester
-
Rundown of HTML markup2m 58s
-
Build a count-up timer5m 56s
-
Add a reset button5m 3s
-
-
9. Loops
-
Loops3m 37s
-
Looping through arrays4m 7s
-
Break and continue loops7m 9s
-
-
10. Project: Automated Responsive Images Markup
-
Project breakdown1m 55s
-
Rundown of project setup3m 26s
-
-
11. Troubleshooting, Validating, and Minifying JavaScript
-
Troubleshooting JavaScript7m 20s
-
Online script linting5m 57s
-
Automate script linting8m 24s
-
Online script minification2m 50s
-
Automate script minification2m 24s
-
12. Bonus Chapter: Ask the Instructor
-
What are arrow functions?3m 11s
-
What does the % symbol do?3m 47s
-
-
Conclusion
-
Next Steps1m 55s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Looping through arrays