DO NOT COPY AND PASTE! You must type it all out yourself for this to be valuable. To make sure of that, the "quotation marks" in the code will copy and paste oddly so copy and pasting will not work :) Practice, practice, practice
Let’s create a person in javascript. We could use a variable...
var person = "John Doe";
To print our person’s name we could do...
var person = "John Doe";
console.log(person)
Well a person has more than a name so let’s add an age and eye color. We could use an array...
var person = ["John Doe", 50, "Blue"]
To print our person’s name, age, and eye color we could do...
var person = ["John Doe", 150, "Blue"]
console.log(person[0]) // John Doe
console.log(person[1]) // 150
console.log(person[2]) // Blue
Ok, now lets print a sentence with our person in it like we might do on a webpage, maybe a profile.
var person = ["John Doe", 150, "Blue"]
console.log("The great" + person[0] + ", with striking " + person[2] + " eyes, was a spry " + person[1] + " years old.");
There are other qualities we might want to add to describe our person like maybe species, number of legs, and number of arms. We could do…
var person = ["John Doe", 150, "Blue", "Human", 2, 2]
Ok, now lets print a sentence with our person in it like we might do on a webpage again.
var person = ["John Doe", 150, "Blue", "Human", 2, 2]
console.log("The great" + person[0] + ", with striking " + person[2] + " eyes, was a spry " + person[1] + " years old. A " + person[3] + "with " + person[4) + "legs and " + person[5] + " arms.");
Yikes, that doesn’t look very readable. It seems like we should use an object to organize our data better. Let’s create a person object and we might as well also separate the first and last name too.
var person = {
species: "human",
legs: 2,
arms: 2,
firstName: "John",
lastName: "Doe",
age: 150,
eyeColor: "Blue"
};
What if we want two different people. We could do
var person1 = {
species: “human”,
legs: 2,
arms: 2,
firstName: “John”,
lastName: “Doe”,
age: 150,
eyeColor: “Blue”
};
var person2 = {
species: "human",
legs: 2,
arms: 2,
firstName: "Jane",
lastName: "Jackson",
age: 200,
eyeColor: "Green"
};
Now when we write our sentence again, it is much easier to read!
var person1 = {
species: "human",
legs: 2,
arms: 2,
firstName: "John",
lastName: "Doe",
age: 150,
eyeColor: "Blue"
};
var person2 = {
species: "human",
legs: 2,
arms: 2,
firstName: "Jane",
lastName: "Jackson",
age: 200,
eyeColor: "Green"
};
console.log("The great" + person1.firstName + " " + person1.lastName + ", with striking " + person1.eyeColor + " eyes, was a spry " + person1.age + " years old. A " + person1.species + "with " + person1.legs + "legs and " + person1.arms + " arms.");
That’s ok. But if we wanted to create 10 or 20 people then we are going to be repeating a lot of code. Let’s build an object as a function ...
var Person = function(first, last, years, eye){
this.firstName = first,
this.lastName = last,
this.age = years,
this.eyeColor = eye,
this.species = "Human",
this.legs = 2,
this.arms = 2
}
Now our person will always start with the species of human, and have 2 legs and 2 arms but each person can be created with their own first name, last name, age, and eye color. We can create our two people again like this...
var Person = function(first, last, years, eye){
this.firstName = first,
this.lastName = last,
this.age = years,
this.eyeColor = eye,
this.species = "Human",
this.legs = 2,
this.arms = 2
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
Now for 10-20 people we would only need to add 1 new line for each person! That’s going to save us lots of time! A quick note on common practices. We generally will name the parameters that the object accepts the same as the property. It can look confusing at first and it is important to know that they do not have to match which is why I wrote it like that originally. It is better practice, though, to name the parameter the same as the property to make sure there is no confusion about what the parameter is for. To write it like that we could do...
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
Let’s look at our sentence again.
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
console.log("The great" + person1.firstName + " " + person1.lastName + ", with striking " + person1.eyeColor + " eyes, was a spry " + person1.age + " years old. A " + person1.species + "with " + person1.legs + "legs and " + person1.arms + " arms.");
We still are only logging our sentence for person1. We could repeat the console.log and change person1 to person2 so that we can print a sentence for both like this
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
console.log("The great" + person1.firstName + " " + person1.lastName + ", with striking " + person1.eyeColor + " eyes, was a spry " + person1.age + " years old. A " + person1.species + "with " + person1.legs + "legs and " + person1.arms + " arms.");
console.log("The great" + person2.firstName + " " + person2.lastName + ", with striking " + person2.eyeColor + " eyes, was a spry " + person2.age + " years old. A " + person2.species + "with " + person2.legs + "legs and " + person2.arms + " arms.");
Ok this is going to get really repetitive if we add 10-20 people again. We should put all of our people into an array and just loop through the array. In the loop, we can console.log the sentence for each person in the array. It would look like this.
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
var people = [person1, person2];
for (var i = 0; i < people.length; i++){
console.log("The great" + people[i].firstName + " " + people[i].lastName + ", with striking " + people[i].eyeColor + " eyes, was a spry " + people[i].age + " years old. A " + people[i].species + "with " + people[i].legs + "legs and " + people[i].arms + " arms.");
}
Now we could add 10-20 people and only have to add 1 line for each person like before. This coming along nicely but a sentence isn’t all that useful so let’s build an HTML page where we list all of our pretend website’s users in a table.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Species</th>
<th>Legs</th>
<th>Arms</th>
<th>Eye Color</th>
</tr>
<tr>
<td>John</td>
<td>Doed</td>
<td>150</td>
<td>Human</td>
<td>2</td>
<td>2</td>
<td>Blue</td>
</tr>
<tr>
<td>Jane</td>
<td>Jackson</td>
<td>200</td>
<td>Human</td>
<td>2</td>
<td>2</td>
<td>Green</td>
</tr>
</table>
</body>
</html>
Well there’s a table but it’s not being created with our javascript objects, it’s just a static list in HTML. Let’s use our javascript and loop to add the rows with javascript.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Species</th>
<th>Legs</th>
<th>Arms</th>
<th>Eye Color</th>
</tr>
</table>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
var people = [person1, person2];
for (var i = 0; i < people.length; i++){
var personRowHtml = "<tr>" + "<td>"+ people[i].firstName + "</td>" + "<td>"+ people[i].lastName + "</td>" + "<td>"+ people[i].age + "</td>" + "<td>"+ people[i].species + "</td>" + "<td>"+ people[i].legs + "</td>" + "<td>"+ people[i].arms + "</td>" + "<td>"+ people[i].eyeColor + "</td></tr>";
$("table").append(personRowHtml);
}
</script>
</body>
</html>
Well that’s neat! We can organize the personRowHtml code to make it more obvious how we are building the html.
for (var i = 0; i < people.length; i++){
var personRowHtml =
"<tr>" +
"<td>"+ person[i].firstName + "</td>" +
"<td>"+ people[i].lastName + "</td>" +
"<td>"+ people[i].age + "</td>" +
"<td>"+ people[i].species + "</td>" +
"<td>"+ people[i].legs + "</td>" +
"<td>"+ people[i].arms + "</td>" +
"<td>"+ people[i].eyeColor + "</td>" +
"</tr>";
$("table").append(personRowHtml);
}
Let’s add more people, we only need to add 1 line of code for each extra person and add them to the people array!
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Species</th>
<th>Legs</th>
<th>Arms</th>
<th>Eye Color</th>
</tr>
</table>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
var person3 = new Person("Steve", "Murphy", 300, "Blue");
var person4 = new Person("Susan", "Chan", 350, "Brown");
var person5 = new Person("Abby", "Smith", 50, "Grey");
var person6 = new Person("Chris", "Mourning", 25, "Brown");
var people = [person1, person2, person3, person4, person5, person6];
for (var i = 0; i < people.length; i++){
var personRowHtml = "<tr>" + "<td>"+ people[i].firstName + "</td>" + "<td>"+ people[i].lastName + "</td>" + "<td>"+ people[i].age + "</td>" + "<td>"+ people[i].species + "</td>" + "<td>"+ people[i].legs + "</td>" + "<td>"+ people[i].arms + "</td>" + "<td>"+ people[i].eyeColor + "</td></tr>";
$("table").append(personRowHtml);
}
</script>
</body>
</html>
This is pretty good. Let’s create a function for our person to check if the person is alive or not.
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = “Human”,
this.legs = 2,
this.arms = 2,
this.isAlive = function(){
if (this.age < 150){
return true;
} else {
return false;
}
}
}
Lets add that column to our table now.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Species</th>
<th>Legs</th>
<th>Arms</th>
<th>Eye Color</th>
<th>Alive?</th>
</tr>
</table>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2,
this.isAlive = function(){
if (this.age < 150){
return true;
} else {
return false;
}
}
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
var person3 = new Person("Steve", "Murphy", 300, "Blue");
var person4 = new Person("Susan", "Chan", 350, "Brown");
var person5 = new Person("Abby", "Smith", 50, "Grey");
var person6 = new Person("Chris", "Mourning", 25, "Brown");
var people = [person1, person2, person3, person4, person5, person6];
for (var i = 0; i < people.length; i++){
var personRowHtml = "<tr>" + "<td>"+ people[i].firstName + "</td>" + "<td>"+ people[i].lastName + "</td>" + "<td>"+ people[i].age + "</td>" + "<td>"+ people[i].species + "</td>" + "<td>"+ people[i].legs + "</td>" + "<td>"+ people[i].arms + "</td>" + "<td>"+ people[i].eyeColor + "</td>" + "<td>" + people[i].isAlive() + "</td></tr>";
$("table").append(personRowHtml);
}
</script>
</body>
</html>
Lets add another function to our person to check if the person can walk and add that to our table.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table style="width:50%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Species</th>
<th>Legs</th>
<th>Arms</th>
<th>Eye Color</th>
<th>Alive?</th>
<th>Can Walk?</th>
</tr>
</table>
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var Person = function(firstName, lastName, age, eyeColor){
this.firstName = firstName,
this.lastName = lastName,
this.age = age,
this.eyeColor = eyeColor,
this.species = "Human",
this.legs = 2,
this.arms = 2,
this.isAlive = function(){
if (this.age < 150){
return true;
} else {
return false;
}
}
this.canWalk= function(){
if (this.legs >= 1){
return true;
} else {
return false;
}
}
};
var person1 = new Person("John", "Doe", 150, "Blue");
var person2 = new Person("Jane", "Jackson", 200, "Green");
var person3 = new Person("Steve", "Murphy", 300, "Blue");
var person4 = new Person("Susan", "Chan", 350, "Brown");
var person5 = new Person("Abby", "Smith", 50, "Grey");
var person6 = new Person("Chris", "Mourning", 25, "Brown");
var people = [person1, person2, person3, person4, person5, person6];
for (var i = 0; i < people.length; i++){
var personRowHtml = "<tr>" + "<td>"+ people[i].firstName + "</td>" + "<td>"+ people[i].lastName + "</td>" + "<td>"+ people[i].age + "</td>" + "<td>"+ people[i].species + "</td>" + "<td>"+ people[i].legs + "</td>" + "<td>"+ people[i].arms + "</td>" + "<td>"+ people[i].eyeColor + "</td>" + "<td>" + people[i].isAlive() + "</td>" + "<td>" + people[i].canWalk() + "</td></tr>";
$("table").append(personRowHtml);
}
</script>
</body>
</html>
Next Steps...
Let’s make a form to create a person and update our table with that new person (use a similar strategy as you used for the form to create Categories and Tasks in our homework)
Let’s make a button on our table that removes 1 leg from every person and then updates the table with the new column data.
Let’s make a button for each person at the end of their row that will change their status isAlive to false and updates the table with that new data.