Loops and Arrays in JavaScript
Loops and Arrays
in JavaScript
MIS 2402
Department of MIS
Fox School of Business
Temple University
Agenda
•
Syntax for writing “for” loops in JavaScript
•
Some practical examples of loops
2
What’s a loop?
3
In programming, a “loop”
is a series of commands
(called “a block of code”)
that repeats for a specified
number of iterations.
It’s a programmatic way of
doing the same thing over
and over again.
Advisory
4
JavaScript supports several different kinds of loop
structures.
All those structures do similar things. In most situations, they are
interchangeable!
In this class, we will only use the first one: the “for” loop.
For the new programmer, learning one general purpose loop
structure and knowing it well, is better than trying to learn several
different structures, each with a slightly different syntax!
•
for
•
for/in
•
for/of
•
while
•
do/while
The syntax of a JavaScript for loop
5
F
o
r
e
x
a
m
p
l
e
:
W
r
i
t
e
t
h
e
n
u
m
b
e
r
s
1
t
o
3
t
o
t
h
e
c
o
n
s
o
l
e
.
for (let x = 1; x <= 3; x++) {console.log(x);
}
x is declared
and assigned a
value.
The loop continues
while this expression
is true.
A shorthand way of
saying x = x + 1
The code block
begins and ends.
Let’s see that with some animation …
6
The code
The computer’s
memory
The console
console.log("Starting");for (let x = 1; x <= 3; x++) {console.log(x);
}
Starting
x = 1
1
X
2
2
X
3
3
X
4
This code can be found in loopexamples.zip, loop01.html
Another (simple) example of a for loop
7
We’re using this variable to
control the number of iterations.
Thinking ahead! We establish
sumOfNumbers here so we can use
it later in the loop.
Let’s see that with some animation …
8
The code
The computer’s
memory
The console
let sumOfNumbers = 0;
let numberOfLoops = 3;
for (let counter=1;counter <= numberOfLoops;counter++){sumOfNumbers = sumOfNumbers + counter;
}
console.log(sumOfNumbers);
6
sumOfNumbers = 0
numberOfLoops=3
counter=1
X
1
X
2
X
3
X
3
X
6
X
4
This code can be found in loopexamples.zip, loop02.html
Another example of a “for” loop
9
Let’s see this loop at work!
(see loop03.html in loopexamples.zip)
More examples
10
Loops can be used to generate repetitive blocks of text.
Loops can be nested inside other loops
(see loop04.html in loopexamples.zip)
(see loop05.html in loopexamples.zip)
ALERT! – In that last example we use the jQuery .append()
method to add text to a message div tag. Appending text is
different from replacing text!
So… what are loops good for?
11
NOTE! Loops are often used
in combination
with other
loops, conditional statements, and functions!
Performing a calculation that requires iterations.
-OR-
Generating repetitive text. Sometimes that text is HTML. Tags
like these can often be generated with a loop:
•
<table> rows
•
<select> options
•
<ul> items
•
<ol> items.
Now let’s work on an exercise …
12
Programming with loops in JavaScript allows commands to repeat for a specified number of iterations, providing a way to efficiently perform repetitive tasks. This concept is crucial in mastering JavaScript programming and forms the backbone of many algorithms and applications. The article delves into the syntax of writing for loops in JavaScript, practical examples, different loop structures, and provides insights into effectively using loops in programming.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
Loops and Arrays in JavaScript MIS 2402 Department of MIS Fox School of Business Temple University
Agenda Syntax for writing for loops in JavaScript Some practical examples of loops 2
Whats a loop? In programming, a loop is a series of commands (called a block of code ) that repeats for a specified number of iterations. It s a programmatic way of doing the same thing over and over again. 3
Advisory JavaScript supports several different kinds of loop structures. for for/in for/of while do/while All those structures do similar things. In most situations, they are interchangeable! In this class, we will only use the first one: the for loop. For the new programmer, learning one general purpose loop structure and knowing it well, is better than trying to learn several different structures, each with a slightly different syntax! 4
The syntax of a JavaScript for loop for (counter initialization; condition; increment expression ) { statements } For example: Write the numbers 1 to 3 to the console. The loop continues while this expression is true. x is declared and assigned a value. A shorthand way of saying x = x + 1 The code block begins and ends. for (let x = 1; x <= 3; x++) { console.log(x); } 5
Lets see that with some animation The code The computer s memory console.log("Starting"); for (let x = 1; x <= 3; x++) { console.log(x); } x = 1 X 4 X 2 X 3 The console Starting 1 2 3 This code can be found in loopexamples.zip, loop01.html 6
Another (simple) example of a for loop This loop that adds the numbers from 1 through 3 let sumOfNumbers = 0; let numberOfLoops = 3; for ( let counter = 1; counter <= numberOfLoops; counter++ ) { sumOfNumbers = sumOfNumbers + counter; } console.log(sumOfNumbers); Thinking ahead! We establish sumOfNumbers here so we can use it later in the loop. We re using this variable to control the number of iterations. 7
Lets see that with some animation The code The computer s memory let sumOfNumbers = 0; let numberOfLoops = 3; for (let counter=1;counter <= numberOfLoops;counter++){ sumOfNumbers = sumOfNumbers + counter; } console.log(sumOfNumbers); sumOfNumbers = 0 numberOfLoops=3 counter=1 X 2 X 1 X 3 X 6 X 3 X 4 The console 6 This code can be found in loopexamples.zip, loop02.html 8
Another example of a for loop let investment = 10000; let annualRate = 7.0; let years = 10; let futureValue = investment; for ( let i = 1; i <= years; i++ ) { futureValue += futureValue * annualRate / 100; } console.log(futureValue.toFixed(2)); // displays 19671.51 Other ways that the future value calculation could be coded inside the code block //Either of these are good substitutes futureValue = futureValue + (futureValue * (annualRate / 100)); futureValue = futureValue * (1 + (annualRate / 100)) Let s see this loop at work! (see loop03.html in loopexamples.zip) 9
More examples Loops can be used to generate repetitive blocks of text. (see loop04.html in loopexamples.zip) Loops can be nested inside other loops (see loop05.html in loopexamples.zip) ALERT! In that last example we use the jQuery .append() method to add text to a message div tag. Appending text is different from replacing text! 10
So what are loops good for? Performing a calculation that requires iterations. -OR- Generating repetitive text. Sometimes that text is HTML. Tags like these can often be generated with a loop: <table> rows <select> options <ul> items <ol> items. NOTE! Loops are often used in combination with other loops, conditional statements, and functions! 11
