Skip to content

Commit 5791f9b

Browse files
chrisdavidmillschrisdavidmills
committed
adding javascript first steps examples
1 parent 52d0d71 commit 5791f9b

30 files changed

+1539
-0
lines changed

‎javascript/introduction-to-js-1/tasks/arrays/arrays1-download.html

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Arrays: Task 1</title>
6+
<style>
7+
p {
8+
color: purple;
9+
margin: 0.5em 0;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
</style>
16+
<link rel="stylesheet" href="../styles.css" />
17+
</head>
18+
19+
<body>
20+
21+
<section class="preview">
22+
23+
24+
25+
</section>
26+
27+
</body>
28+
<script>
29+
// Add your code here
30+
31+
// Don't edit the code below here!
32+
33+
const section = document.querySelector('section');
34+
35+
let para1 = document.createElement('p');
36+
para1.textContent = `Array: ${ myArray }`;
37+
38+
section.appendChild(para1);
39+
</script>
40+
41+
</html>

‎javascript/introduction-to-js-1/tasks/arrays/arrays1.html

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Arrays: Task 1</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
p {
13+
color: purple;
14+
margin: 0.5em 0;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<section class="preview">
21+
22+
23+
24+
</section>
25+
26+
<textarea class="playable playable-js" style="height: 220px;">
27+
28+
// Add your code here
29+
30+
// Don't edit the code below here!
31+
32+
section.innerHTML = ' ';
33+
let para1 = document.createElement('p');
34+
para1.textContent = `Array: ${ myArray }`;
35+
36+
section.appendChild(para1);
37+
</textarea>
38+
39+
<div class="playable-buttons">
40+
<input id="reset" type="button" value="Reset" />
41+
</div>
42+
</body>
43+
<script class="editable"></script>
44+
<script src="../playable.js"></script>
45+
</html>

‎javascript/introduction-to-js-1/tasks/arrays/arrays2-download.html

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Arrays: Task 2</title>
6+
<style>
7+
p {
8+
color: purple;
9+
margin: 0.5em 0;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
</style>
16+
<link rel="stylesheet" href="../styles.css" />
17+
</head>
18+
19+
<body>
20+
21+
<section class="preview">
22+
23+
24+
25+
</section>
26+
27+
</body>
28+
<script>
29+
// Add your code here
30+
31+
let myString = 'Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri';
32+
33+
// Don't edit the code below here!
34+
35+
const section = document.querySelector('section');
36+
37+
let para1 = document.createElement('p');
38+
para1.textContent = `Array: ${ myArray }`;
39+
40+
let para2 = document.createElement('p');
41+
para2.textContent = `The length of the array is ${ arrayLength }.`;
42+
43+
let para3 = document.createElement('p');
44+
para3.textContent = `The last item in the array is "${ lastItem }".`;
45+
46+
section.appendChild(para1);
47+
section.appendChild(para2);
48+
section.appendChild(para3);
49+
</script>
50+
51+
</html>

‎javascript/introduction-to-js-1/tasks/arrays/arrays2.html

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Arrays: Task 2</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
p {
13+
color: purple;
14+
margin: 0.5em 0;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<section class="preview">
21+
22+
23+
24+
</section>
25+
26+
<textarea class="playable playable-js" style="height: 220px;">
27+
28+
// Add your code here
29+
30+
let myString = 'Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri';
31+
32+
// Don't edit the code below here!
33+
34+
section.innerHTML = ' ';
35+
let para1 = document.createElement('p');
36+
para1.textContent = `Array: ${ myArray }`;
37+
38+
let para2 = document.createElement('p');
39+
para2.textContent = `The length of the array is ${ arrayLength }.`;
40+
41+
let para3 = document.createElement('p');
42+
para3.textContent = `The last item in the array is "${ lastItem }".`;
43+
44+
section.appendChild(para1);
45+
section.appendChild(para2);
46+
section.appendChild(para3);
47+
</textarea>
48+
49+
<div class="playable-buttons">
50+
<input id="reset" type="button" value="Reset" />
51+
</div>
52+
</body>
53+
<script class="editable"></script>
54+
<script src="../playable.js"></script>
55+
</html>

‎javascript/introduction-to-js-1/tasks/arrays/arrays3-download.html

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Arrays: Task 3</title>
6+
<style>
7+
p {
8+
color: purple;
9+
margin: 0.5em 0;
10+
}
11+
12+
* {
13+
box-sizing: border-box;
14+
}
15+
</style>
16+
<link rel="stylesheet" href="../styles.css" />
17+
</head>
18+
19+
<body>
20+
21+
<section class="preview">
22+
23+
24+
25+
</section>
26+
27+
</body>
28+
<script>
29+
let myArray = [ "Ryu", "Ken", "Chun-Li", "Cammy", "Guile", "Sakura", "Sagat", "Juri" ];
30+
31+
// Add your code here
32+
33+
// Don't edit the code below here!
34+
35+
const section = document.querySelector('section');
36+
37+
let para1 = document.createElement('p');
38+
para1.textContent = myString;
39+
40+
section.appendChild(para1);
41+
</script>
42+
43+
</html>

‎javascript/introduction-to-js-1/tasks/arrays/arrays3.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Arrays: Task 3</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
p {
13+
color: purple;
14+
margin: 0.5em 0;
15+
}
16+
</style>
17+
</head>
18+
19+
<body>
20+
<section class="preview">
21+
22+
23+
24+
</section>
25+
26+
<textarea class="playable playable-js" style="height: 220px;">
27+
let myArray = [ "Ryu", "Ken", "Chun-Li", "Cammy", "Guile", "Sakura", "Sagat", "Juri" ];
28+
29+
// Add your code here
30+
31+
// Don't edit the code below here!
32+
33+
section.innerHTML = ' ';
34+
35+
let para1 = document.createElement('p');
36+
para1.textContent = myString;
37+
38+
section.appendChild(para1);
39+
</textarea>
40+
41+
<div class="playable-buttons">
42+
<input id="reset" type="button" value="Reset" />
43+
</div>
44+
</body>
45+
<script class="editable"></script>
46+
<script src="../playable.js"></script>
47+
</html>

‎javascript/introduction-to-js-1/tasks/arrays/marking.md

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
# JavaScript arrays marking guide
2+
3+
The aim of the tasks is to demonstrate an understanding of the JavaScript features covered in the [Arrays](https://wiki.developer.mozilla.org/en-US/docs/Learn/JavaScript/First_steps/Arrays) lesson in Learn Web Development on MDN.
4+
5+
Note: If there is an error in your code, it will be outputted into the results panel on the page, to help you try to figure out the answer (or into the browser's JavaScript console, in the case of the downloadable version).
6+
7+
## Task 1
8+
9+
We'll start off simple; the first thing you need to do here is create an array of three items. Choose whatever items you like — your favourite bands or foods, perhaps? Store in a variable called `myArray`.
10+
11+
Next, modify the first two items in the array to some different items, using simple bracket notation, e.g. `myArray[0] = 'pizza'`.
12+
13+
Last of all, add an item to the start of the array using `.unshift()`.
14+
15+
The answer should look something like this:
16+
17+
```
18+
let myArray = ['cats', 'dogs', 'chickens'];
19+
20+
myArray[0] = 'horses';
21+
myArray[1] = 'pigs';
22+
23+
myArray.unshift('crocodiles');
24+
```
25+
26+
27+
## Task 2
28+
29+
Moving on, the next task provides a string for you to work on.
30+
31+
Here you are expected to start by splitting the string into an array using `.split('+')`. Store the array in `myArray`.
32+
33+
Next, store the length of the array (`myArray.length`) in a variable called `arrayLength`.
34+
35+
Last up, retrieve the last item in the array with `myArray[myArray.length - 1]`; store it in `lastItem`.
36+
37+
The example should look something like this:
38+
39+
```
40+
let myString = 'Ryu+Ken+Chun-Li+Cammy+Guile+Sakura+Sagat+Juri';
41+
42+
let myArray = myString.split('+');
43+
44+
let arrayLength = myArray.length;
45+
46+
let lastItem = myArray[myArray.length - 1];
47+
```
48+
49+
## Task 3
50+
51+
For our final array task, we are working in somewhat the opposite direction.
52+
53+
You should start by popping the last item off the array using `myArray.pop()`.
54+
55+
Next, add two new names to the end of the array using `myArray.push()`
56+
57+
For an added challenge, you'll need to use `.forEach()` or some kind of loop (we didn't cover these in the array article, so look them up) to go over each item in the array and add its index number after the name inside parentheses. Note that when using `forEach` you are performing operations on a copy of the array elements, not the array elements themselves, so you can't change them directly — you have to create the new array item and copy it back over.
58+
59+
Finally you need to stitch the array items together into a string using `myArray.join(' - ')`, and store the result in `myString`.
60+
61+
```
62+
let myArray = [ "Ryu", "Ken", "Chun-Li", "Cammy", "Guile", "Sakura", "Sagat", "Juri" ];
63+
64+
myArray.pop();
65+
66+
myArray.push('Zangief');
67+
myArray.push('Ibuki');
68+
69+
myArray.forEach(function(element, index) {
70+
let newElement = `${ element } (${index})`;
71+
myArray[index] = newElement;
72+
});
73+
74+
let myString = myArray.join(' - ');
75+
```

0 commit comments

Comments
 (0)