| title |
before |
folders |
after |
notes |
Set up project |
Before we get started, create some files and get ready.
|
| label |
type |
contact-list-generator |
folder |
|
| label |
indent |
index.html |
1 |
|
| label |
type |
indent |
js |
folder |
1 |
|
|
| label |
indent |
contacts.js |
2 |
|
|
1. Make an `index.html` & add the boilerplate code.
2. Make a `main.js` in your `js` folder.
3. Make a `contacts.js` in your `js` folder.
|
| label |
text |
Naming conventions |
Don’t forget to follow the [naming conventions](/topics/naming-paths-cheat-sheet/#naming-conventions). |
|
| label |
text |
HTML snippets |
Create the boilerplate with `html5` & `viewport` |
|
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
notes |
Connect the JavaScript files |
We can connect as many JavaScript files to our website as we want. *But, just as CSS, the more there are the slower your website.*
|
index.html |
html |
⋮
</head>
<body>
<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2Fjs%2Fcontacts.js"></script>
<script src="proxy.php?url=https%3A%2F%2Fwww.github.com%2Fjs%2Fmain.js"></script>
</body>
</html>
|
|
| num |
text |
5-6 |
Everything we write in one JavaScript file is usable in the other file. The order is important.
|
|
|
|
| label |
text |
HTML snippets |
Create the `<script>` tag with `jss` |
|
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
Write the data structure |
Inside our `contacts.js` file I want to write out the data for all of the contacts.
|
js/contacts.js |
js |
var peeps = [
{
name: 'Mercury Man',
email: ' [email protected]',
tel: '+05551234',
loc: [46001200, 69816900]
},
{
name: 'Venus ’Venturer',
email: ' [email protected]',
tel: '+15551234',
loc: [107477000, 108939000]
},
{
name: 'Jupiter Juggernaut',
email: ' [email protected]',
tel: '+55551234',
loc: [816040000, 740550000]
}
];
|
| num |
text |
1-2 |
Notice how we’re creating an array and every item inside the array is an object. |
|
| num |
text |
6 |
An array inside an object inside an array. |
|
| num |
text |
7 |
Don’t forget the commas between each object! |
|
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
Starting the function |
Let’s start writing the function that will take a list of peeps and output it to our HTML file.
|
js/main.js |
js |
var listContacts = function (contacts) {
// We’ll write stuff in here later
};
listContacts(peeps);
|
| num |
text |
1 |
Functions are just another thing you can put inside a variable. They’re reusable pieces of code.
In between the round brackets (`contact`) is an argument—you can call it whatever you want. An argument is a variable that’s only available inside the function. It can be set when executing the function.
|
|
| num |
text |
5 |
Here we execute the function. To call a function you write its variable name followed by open and close round brackets. Like `writeContacts()` or `document.write()`
We can put information between the round brackets to set the function’s argument variables. The order you write it between the brackets is captured by the same order in the function.
In this line `peeps` refers to the name of the variable we created in `contacts.js`.
|
|
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
after |
Output the contact names |
Let’s see if our function is working by outputting the name of the contacts and a page title.
|
js/main.js |
js |
⋮
var listContacts = function (contacts) {
document.write('<h1>Planetary peeps</h1>');
contacts.forEach(function (item) {
document.write(`<h2>${item.name}</h2>`);
// More stuff going in here later
});
};
listContacts(peeps);
⋮
|
|
| num |
text |
3 |
We’ll use `document.write()` to create an `<h1>` tag in our website. |
|
| num |
text |
5 |
The `forEach` loop is a special kind of loop that will iterate over every single item in an array. With this loop we don’t need to know how many times to loop—JavaScript just does it.
Notice that we pass in a `function()` to the loop. This function will be executed on every item in the array. The current array item will be saved into the functions first argument—here it’s called it `item`
|
|
| num |
text |
6 |
By writing code inside the `forEach` loop it will happen for every single item in the array.
Notice the `item.name`:
- `item` refers to the function argument variable defined in the `forEach` loop on the line above. It’s a representation of one single item in the array.
- `.name` refers to one of the object properties we defined in `contacts.js`
|
|
| num |
text |
8-9 |
Be careful of all these brackets.
1. The first `}` closes the `function` inside the loop.
2. The `)` closes the `forEach` loop.
3. The last `}` closes the `listContacts` function.
|
|
|
|
Check your browser and you should see all the contact names output.
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
after |
Output the e-mail & phone |
Looking at the data in the `peeps`, I feel like much of the information should go into a `<dl>` tag.
|
js/main.js |
js |
⋮
contacts.forEach(function (item) {
document.write('<h2>' + item.name + '</h2>');
document.write('<dl>');
document.write('<dt>E-mail address</dt>');
document.write(`<dd><a href="proxy.php?url=https%3A%2F%2Fwww.github.com%2Fmailto%3A%24%7Bitem.email%7D">${item.email}</a></dd>`);
document.write('<dt>Phone number</dt>');
document.write(`<dd><a href="proxy.php?url=https%3A%2F%2Fwww.github.com%2Ftel%3A%24%7Bitem.tel%7D">${item.tel}</a></dd>`);
// More stuff to come here
document.write('</dl>');
});
};
⋮
|
|
| num |
text |
4 |
Start the `<dl>` tag by writing only the opening HTML tag. |
|
| num |
text |
5 |
Write out a `<dt>` tag to before we get to the actual data. |
|
| num |
text |
6 |
Write out `<dd>` and `<a>` tags by using the `` ` `` to concatenate a bunch of things together. Inside the interpolated string use `${}` to surround variables.
|
|
| num |
text |
10 |
Finally end the `<dl>` tag by writing the closing HTML tag. |
|
|
|
Check your browser and you should be seeing more information from the contacts.
|
|
| title |
before |
code_file |
code_lang |
code |
lines |
after |
Display the location |
Unlike the other pieces of data, the `loc` is an array, so we have to treat it slightly differently.
|
js/main.js |
js |
⋮
document.write('<dt>Phone number</dt>');
document.write(`<dd><a href="proxy.php?url=https%3A%2F%2Fwww.github.com%2Ftel%3A%24%7Bitem.tel%7D">${item.tel}</a></dd>`);
document.write('<dt>Location</dt>');
document.write(`<dd>Between ${item.loc[0]} km & ${item.loc[1]} km from the Sun.</dd>`);
document.write('</dl>');
});
};
⋮
|
|
| num |
text |
5 |
Notice the `item.loc[0]`:
- `item` refers to the function argument variable defined in the `forEach` loop. It’s a representation of one single item in the array.
- `.loc` refers to one of the object properties we defined in `contacts.js`
- The `[0]` will get the first item out of the `loc` array.
|
|
|
|
Check your browser and you lots of details now.
|
|
| title |
before |
Add more contacts |
We’ve created a very basic templating system now where we don’t have to copy-and-paste a bunch of HTML code to write out similar information.
There’s a motto in programming: **Keep things DRY**. As in “Don’t Repeat Yourself”. *If you have to copy and paste you’re doing something wrong.*
**Go into the `contacts.js` file and add a new contact at the bottom.** When you refresh your HTML page a new entry should magically appear.
|
|