Sample Code for Thursday Morning Exercise
This morning we went over Object Oriented JavaScript and constructors specifically. Here's the code we used for this morning's example:
Step 1: Folder structure
cd
cd code
mkdir obj && cd $_
mkdir scripts
touch scripts/app.js
touch index.html
The HTML
Enter this into the HTML file:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>Turtles</h1>
<ul></ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="scripts/app.js"></script>
</body>
</html>
The JavaScript
Enter this into your app.js file
function Turtle(color, name, weapon, pizzaTopping) {
this.color = color || 'blue';
this.name = name || 'Leonardo';
this.weapon = weapon || 'Sword';
this.pizzaTopping = pizzaTopping || 'cheese';
}
var leonardo = new Turtle('blue', 'Leonardo', 'Katana', 'cheese');
var michaelangelo = new Turtle('orange', 'Michaelangelo', 'nun-jucks', 'sausage');
var randomTurtle = new Turtle();
// Loop over all the turtles
[leonardo, michaelangelo, randomTurtle].forEach(function(turtle) {
$('ul').append('<li>' + turtle.name + ': I use a ' + turtle.weapon + ' wear a ' + turtle.color + ' headband and like ' + turtle.pizzaTopping + '</li>');
});
SUPER HARD BONUS
This is stuff we didn't cover - we will in later weeks - but if you get it, you're aweomse:
function Turtle(color, name, weapon, pizzaTopping) {
this.color = color || 'blue';
this.name = name || 'Leonardo';
this.weapon = weapon || 'Sword';
this.pizzaTopping = pizzaTopping || 'cheese';
}
Turtle.prototype.useWeapon = function() {
return 'swinging my ' + this.weapon;
}
var lilTurtle = new Turtle();
console.log(lilTurtle.useWeapon());