Tech School

User Tools

Site Tools

Trace: • padding_margin • javascript • arrays • javascript • javascript
en:web_development:tables:arrays

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:tables:arrays [2021/12/10 07:28]
mag [Multidimensional Arrays] 		en:web_development:tables:arrays [2023/08/16 09:33] (current)
Line 1: Line 1:
-====== Web Development Lesson 3 - Tablas ======+====== Web Development Lesson 4 - Tables ======
 ===== Javascript Multidimensional Arrays ===== ===== Javascript Multidimensional Arrays =====
 ==== Objective ==== ==== Objective ====
Line 5: Line 5:
  
 ==== Setup ==== ==== Setup ====
-  * We'll add this as a page in our project, so create a file called 'team.html' in your 'project' directory.+  * In your 'project' directory, create a file called 'team.html'.
   * Set up the template using 'html:5' and 'link:css' in the header.   * Set up the template using 'html:5' and 'link:css' in the header.
   * Also add a Javascript file using 'script:src' and set <html>src</html> to 'team.js', then create the file 'team.js'.   * Also add a Javascript file using 'script:src' and set <html>src</html> to 'team.js', then create the file 'team.js'.
Line 150: Line 150:
   * First, let's update our 'generate data' section to show an array of arrays (list of lists).   * First, let's update our 'generate data' section to show an array of arrays (list of lists).
 <code>    players = [ <code>    players = [
-              ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'], +        ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'], 
-              ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'], +        ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'], 
-              ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'], +        ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'], 
-              ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']+        ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']
               ];</code>               ];</code>
   * Note that each line is an element in the larger list, so we separate them by <html>,</html>.   * Note that each line is an element in the larger list, so we separate them by <html>,</html>.
Line 179: Line 179:
   * We've kept the variable name as <html>statsRow</html> because it fits our code for adding to the table, but this is a different variable to the one inside the function. The one inside the function only works inside the function (its 'scope' is the function).   * We've kept the variable name as <html>statsRow</html> because it fits our code for adding to the table, but this is a different variable to the one inside the function. The one inside the function only works inside the function (its 'scope' is the function).
   * <html>createRowText(players[p])</html> calls the function <html>createRowText</html> and provides it the data belonging to the current player as we saw in the Console.   * <html>createRowText(players[p])</html> calls the function <html>createRowText</html> and provides it the data belonging to the current player as we saw in the Console.
-  * If you check the page again now, you'll only be showing the last player because we're overwriting the player data every time we call the function (<html>statsRow = createRowText(players[p])</html> reassigns <html>stats</html>).+  * If you check the page again now, you'll only be showing the last player because we're overwriting the player data every time we call the function (<html>statsRow = createRowText(players[p])</html> reassigns <html>statsRow</html>).
   * Let's move the 'add row to table' block of code inside the 'for loop' so we display each row when the data is ready (and before we lose it).   * Let's move the 'add row to table' block of code inside the 'for loop' so we display each row when the data is ready (and before we lose it).
 <code>    for (p = 0; p < players.length; p++) { <code>    for (p = 0; p < players.length; p++) {
Line 201: Line 201:
     // generate data     // generate data
     players = [     players = [
-              ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'], +        ['David', 'Ospina Ramirez', 'Colombia', 33, 'Portero'], 
-              ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'], +        ['Carlos', 'Eccehomo Cuesta Figueroa', 'Colombia', 22, 'Defensa'], 
-              ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'], +        ['Juan Guillermo', 'Cuadrado Bello', 'Colombia', 33, 'Centrocampista'], 
-              ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']+        ['Radamel Falcao', 'García Zárate', 'Colombia', 35, 'Delantero']
               ];               ];
  
en/web_development/tables/arrays.1639150080.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