Tech School

User Tools

Site Tools

Trace:
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 [2021/12/06 08:15]
mag [Iterating Arrays] 		en:web_development:lists:javascript [2023/08/16 09:33] (current)
Line 1: Line 1:
-====== Web Development Lesson 2 - Lists ======+====== Web Development Lesson 3 - Lists ======
 ===== Javascript Lists ===== ===== Javascript Lists =====
 +==== Objectives ====
 +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 38: Line 40:
 <code>document.body.innerHTML = cars[0];</code> <code>document.body.innerHTML = cars[0];</code>
   * Run the code and see that it displays 'ferrari', the first item.   * Run the code and see that it displays 'ferrari', the first item.
-  * Try changing th enumber inside the <html> [] </html> and check the results to be sure you understand how it works.+  * Try changing the number inside the <html> [] </html> and check the results to be sure you understand how it works.
   * Using this technique, we can display the results of our list in our Visual Studio page.   * Using this technique, we can display the results of our list in our Visual Studio page.
   * Open 'lists.html' and add an unordered list just before the closing <html></body></html> tag.   * Open 'lists.html' and add an unordered list just before the closing <html></body></html> tag.
-<code><h2>Players</h2>+<code>  <h2>Players</h2>
   <ol></ol>   <ol></ol>
 </body></code> </body></code>
Line 101: 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 = "";
 for (i = 0; i < 10; i++) { for (i = 0; i < 10; i++) {
- text += i + "<br />";+ text += cars[i] + "<br />";
 } }
 document.body.innerHTML = text;</code> document.body.innerHTML = text;</code>
Line 110: Line 113:
 <code>var carList = ""; <code>var carList = "";
 for (i = 0; i < 10; i++) { for (i = 0; i < 10; i++) {
- carList += i + "<br />";+ carList += cars[i] + "<br />";
 } }
 document.body.innerHTML = carList;</code> document.body.innerHTML = carList;</code>
Line 116: Line 119:
 <code>var carList = ""; <code>var carList = "";
 for (i = 0; i < 3; i++) { for (i = 0; i < 3; i++) {
-  carList += i + "<br />";+  carList += cars[i] + "<br />";
 } }
 document.body.innerHTML = carList;</code> document.body.innerHTML = carList;</code>
Line 128: Line 131:
  
 window.onload = function () { window.onload = function () {
 +  playerList = "";
   for (i = 0; i < 4; i++) {   for (i = 0; i < 4; i++) {
     playerList += "<li>" + players[i] + "</li>";     playerList += "<li>" + players[i] + "</li>";
Line 139: Line 143:
   * Let's see how this works in jsfiddle.   * Let's see how this works in jsfiddle.
   * Add an alert to your Javascript code.   * Add an alert to your Javascript code.
-<code>alert("cars has " + cars.length + "items.");</code>+<code>alert("cars has " + cars.length + " items.");</code>
   * Run that and check that it does what you think it should.   * Run that and check that it does what you think it should.
   * So we can change our continuing condition for the list of players as follows.   * So we can change our continuing condition for the list of players as follows.
Line 156: 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 204: 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.1638807326.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