Tech School

User Tools

Site Tools

Trace: • javascript • javascript
en:web_development:lists:javascript

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision 		Previous revision
en:web_development:lists:javascript [2022/03/13 10:20]
mag [Iterating Arrays] 		en:web_development:lists:javascript [2023/08/16 09:33] (current)
Line 4: Line 4:
 In this exercise you will use an array to store a list of items, use a for loop to repeat a block of code, and use an if statement to run different instructions based on user input. In this exercise you will use an array to store a list of items, use a for loop to repeat a block of code, and use an if statement to run different instructions based on user input.
 ==== Setup ==== ==== Setup ====
-  * We'll use the first file you created in this lesson called 'lists.html', so open that file in Visual Studio Code.+  * We'll use the first file you created in this lesson called '[[https://techschool.murraygunn.id.au/webdev/classes/lists/3/lists.html|lists.html]]', so open that file in Visual Studio Code.
   * Create a file called 'lists.js' in the same directory.   * Create a file called 'lists.js' in the same directory.
   * We'll also return to [[https://jsfiddle.net|jsfiddle]] to try out a few things.   * We'll also return to [[https://jsfiddle.net|jsfiddle]] to try out a few things.
Line 103: Line 103:
 ==== Iterating Arrays ==== ==== Iterating Arrays ====
   * So now that you understand how for loops work, we can apply it to an array.   * So now that you understand how for loops work, we can apply it to an array.
 +  * Open your jsfiddle tab again.
   * Let's edit the for loop you have already.   * Let's edit the for loop you have already.
 <code>var text = ""; <code>var text = "";
Line 159: Line 160:
 }</code> }</code>
   * The basic structure of this code is <html>if (condition) { code to execute if true }</html>.   * The basic structure of this code is <html>if (condition) { code to execute if true }</html>.
-  * We have a condition inside the <html> () </html>, and only if that code is true do we run the code inside <html> {} </html>.+  * We have a condition inside the <html> () </html>, and only if that condition is true do we run the code inside <html> {} </html>.
   * In this case, our condition is <html> x == 2 </html>, which checks the value of <html> x </html> and the value of <html> 2 </html>. If the value of <html> x </html> is 2, then it will run the code displaying an alert.   * In this case, our condition is <html> x == 2 </html>, which checks the value of <html> x </html> and the value of <html> 2 </html>. If the value of <html> x </html> is 2, then it will run the code displaying an alert.
   * Since we've just defined <html> x = 2 </html> (first line), this condition is true and the alert will be displayed. Try it now.   * Since we've just defined <html> x = 2 </html> (first line), this condition is true and the alert will be displayed. Try it now.
Line 207: Line 208:
 }</code> }</code>
   * Run that and try it out for yourself.   * Run that and try it out for yourself.
 +
 +==== Final Code ====
 +  * [[https://jsfiddle.net/maganthro/t3bq247f/13/|jsfiddle]]
 +  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/es.php|lists.html]]
 +  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/listsjs.php|lists.js]]
 +  * [[https://techschool.murraygunn.id.au/webdev/classes/lists/4/lists.html|final result]]
  
 [[en:web_development:lists:exercise|Next: Exercises]] [[en:web_development:lists:exercise|Next: Exercises]]
en/web_development/lists/javascript.1647192026.txt.gz · Last modified: 2023/08/16 09:33 (external edit)

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki