wit_javascript/level5.html at main · Ferduse/wit_javascript · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title> Javascript Workshop: Level 5</title>

  <link rel="stylesheet" href="styles.css">

</head>

<body>
  <h1>Welcome to level 5! We will learn about arrays & loops in Javascript!!</h1>

  <h2>About Arrays</h2>
  <h3>An array is a list of items contained within brakets that looks like this
    <pre>
      <code>
        let anArray = ["one", 2, 3];
      </code>
    </pre>
  </h3>

  <h3>
    Arrays hold information about what position a value is in the list, so to access them you can use their index values that correspond to their order.
  </h3>
  <h3>
    For example to get the first value from "anArray", we would do the following
    <pre>
      <code>
        let anArray = ["one", 2, 3];
        let firstValue = anArray[0]; --> will get you value "one"
      </code>
    </pre>
  </h3>
  <h3> to keep getting more values further down we would increase our index value</h3>
  <h3> other info you can get from an array is its length
    <pre>
      <code>
        let anArray = ["one", 2, 3];
        let length = anArray.length(); --> will get you value 3
      </code>
    </pre>
  </h3>

  <h2>Lets write a function in which a user can input an array and can recive back it's length</h2>
  <ul>
    <li>open up level5.js in vscode</li>
    <li>declare a function with the name <strong>arrayLength</strong></li>
    <li>allow a user to input an array as an argument to your <strong>arrayLength</strong> function</li>
    <li><strong>return</strong> the array length value</li>
    <li>create an array and declare it to a variable caled <strong>myArray</strong> </li>
    <li>call your function arrayLength and pass your array as an argument</li>
    <li>set the return value as a variable called <strong>myArrayLength</strong></li>
    <li>to attatch your code to an element on the page un-comment the lines below your function in level5.js</li>
  </ul>

  <button id="level5_button1">Click to reveal answer</button>
  <div id="level5_answer1" class="hidden">
    <pre>
      <code>
        function arrayLength(array) {
          return array.length();
        }

        let myArray = [1, 2, 3, 4, 5];

        let myArrayLength = arrayLength(myArray);

      </code>
    </pre>
  </div>

  <div >
    <h3 id="arrayAnswer">you array length answer is: </h3>
  </div>
  <br>

  <h2>Now let's use an array again with a loop in our function to make a list</h2>
  <h2>First lets breakdown the loop</h2>
  <h2>To loop through an array we can use the for loop syntax</h2>
  <pre>
    <code>
      for(let i = 0; i < items.length; i++) {
        console.log(items[i]);
      }
    </code>
  </pre>
  <ol>
    <li>this for loop instatiates a variable i: let i = 0</li>
    <li>then sets a boolean statement that says, as long as i is less than items.length increase i (which is the i++ part)</li>
    <li>everytime you enter the loop you recieve a console.log with the item at index i</li>
    <li>once i is increased to equal or be greater than items.length the loop will end</li>
  </ol>

  <h2>Now lets ACTUALLY create a looping function</h2>
  <ul>
    <li>open level5.js in vscode</li>
    <li>declare a function called <strong>createList</strong> under the code you created previously</li>
    <li>allow you <strong>createList</strong> to take one array as an argument</li>
    <li>create a for loop like the one in the example above</li>
    <li>make sure that you replace the variable items with the argument name for your array</li>
    <li>create a variable called <strong>stringArray</strong> that contains an array of your top fave movies as strings</li>
    <li>call your function and pass in <strong>stringArray</strong> as an argument</li>
    <li>open up your web console and see that your movies are being listed</li>
  </ul>

  <button id="level5_button2">Click to reveal answer</button>
  <div id="level5_answer2" class="hidden">
    <pre>
      <code>
        function createList(array) {
          for (let i = 0; i < array.length; i++) {
            console.log(array[i]);
          }
        }

        let stringArray = ['batman', 'inception', 'lord of the rings'];

        let list = createList(stringArray);
      </code>
    </pre>
  </div>

  <h2>Great! Now lets add those movies as a list below</h2>

  <ul>
    <li>in your for loop instead of console.log lets grab an element that will contain your list</li>
    <li>
      i have set up an element with an id of
      <strong>faveMovies</strong> so to grab it copy the code below
      and insert it in your function <strong>before</strong> your for loop
    </li>
    <pre>
      <code>
        let listElm = document.getElementById('faveMovies');
      </code>
    </pre>
    <li> next within your for loop lets create an element for each list item</li>
    <pre>
      <code>
        let listItem = document.createElement('li');
      </code>
    </pre>
    <li>and now lets set the text within this elements tag to be the current movie in your list</li>
    <pre>
      <code>
        listItem.innerHTML = array[i];
      </code>
    </pre>
    <li>finally lets append your list element to the main list container</li>
    <pre>
      <code>
        listElm.append(listItem);
      </code>
    </pre>
    <li>if all goes well your movies should appear in the list below</li>
  </ul>

  <button id="level5_button3">Click to reveal answer</button>
  <div id="level5_answer3" class="hidden">
    <pre>
      <code>
        function createList(array) {
          let listElm = document.getElementById('faveMovies');
          for (let i = 0; i < array.length; i++) {
            let listItem = document.createElement('li');
            listItem.innerHTML = array[i];
            listElm.append(listItem);
          }
        }

        let stringArray = ['batman', 'inception', 'lord of the rings'];

        createList(stringArray);
      </code>
    </pre>
  </div>

  <h2>my fave movies are:</h2>
  <div id="faveMovies">

  </div>

  <a href="level6.html">Click to go to final level!!</a>

  <script src="script.js"></script>
  <script src="level5.js"></script>

</body>
</html>