book.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My Learning Website</title>
<link href="/styles/styles.css" rel="stylesheet" type="text/css">
<link href="/webdevelopment/styles/styles.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script type="module" src="Book.js"></script>
<script type="module" src="script.js"></script>
</head>
<body>
<h1 class="courselink">JavaScript Essential Training</h1>
<h2 class="lecturer">LinkedIn Learning : Morten Rand-Hendriksen</h2>
<h1 class="episodetitle">Challenge: Create a New Object Type</h1>
<article>
<h2 class="sectiontitle">Introduction</h2>
<p>This is the code for the CD class.</p>
<pre class="codesample">
/**
* Creating classes:
*
* Class declaration: class Name {}
* Class expression: const Name = class {}
*/
class CD {
constructor(
// Defines parameters:
title,
artist,
release,
tracks[]
) {
// Define properties:
this.title = title;
this.artist = artist;
this.release = release;
}
// Add methods like normal functions:
addTrack(number, title, writer)
this.track[number]=[title, writer];
}
}
export default CD;</pre>
</article>
<div class="btngroup">
<button class="button" onclick="window.location.href='javascriptessentialtraining2021.html'">
Course Contents
</button>
<button class="button" onclick="window.location.href='/webdevelopment/webdevelopment.html'">
Web Development Page
</button>
<button class="button" onclick="window.location.href='/index.html'">
Home
</button>
</div>
</body>
</html>
Book.js
class Book {
constructor(title, author, isbn_13, pub_date, publisher, status)
{
this.title=title;
this.author=author;
this.isbn_13=isbn_13;
this.pub_date=pub_date;
this.publisher=publisher;
this.status=status;
}
// functions go here
setStatus(newStatus) {
this.status=newStatus;
}
loanBook() {
this.status="loaned out";
}
returnBook() {
this.status="on shelf";
}
startBook() {
this.status="reading";
}
finishBook() {
this.status="read";
}
}
export default Book;
script.js
import Book from "./Book.js";
const cssInDepth = new Book("CSS In Depth", "Jim Smith", "10101010101", 2019, "O'Reilly", "on shelf");
const foundation = new Book("Foundation", "Isaac Asimov", "10101010101010", 1957, "Doubleday", "on shelf");
const atlas = new Book("World Atlas", "n/a", "0689213952728", 2021, "Collins", "on coffee table");
const magyars = new Book("Magical Magyars","David Bailey", "0956218891011", 2020, "Pitch", "loaned out");
const complete = new Book("The Complete Robot", "Isaac Asimov", "0414772405062", 1982, "Harper Collins", "reading");
var bookshelf=[];
bookshelf[0]=cssInDepth;
bookshelf[1]=foundation;
bookshelf[2]=atlas;
bookshelf[3]=magyars;
bookshelf[4]=complete;
console.log("Books are : ", bookshelf);
console.log("Checking status on ", complete);
complete.finishBook();
console.log("Checking status on ", complete);
console.log("Checking status on ", foundation);
foundation.startBook();
console.log("Checking status on ", foundation);
console.log("Checking status on ", magyars);
magyars.returnBook();
console.log("Checking status on ", magyars);
console.log("Checking status on ", cssInDepth);
cssInDepth.startBook();
console.log("Checking status on ", cssInDepth);
console.log("Checking status on ", atlas);
atlas.loanBook();
console.log("Checking status on ", atlas);
Output
Books are : {
{
"title": "CSS In Depth",
"author": "Jim Smith",
"isbn_13": "10101010101",
"pub_date": 2019,
"publisher": "O'Reilly",
"status": "reading"
"title": "Foundation",
"author": "Isaac Asimov",
"isbn_13": "10101010101010",
"pub_date": 1957,
"publisher": "Doubleday",
"status": "reading"
"title": "World Atlas",
"author": "n/a",
"isbn_13": "0689213952728",
"pub_date": 2021,
"publisher": "Collins",
"status": "loaned out"
"title": "Magical Magyars",
"author": "David Bailey",
"isbn_13": "0956218891011",
"pub_date": 2020,
"publisher": "Pitch",
"status": "on shelf"
"title": "The Complete Robot",
"author": "Isaac Asimov",
"isbn_13": "0414772405062",
"pub_date": 1982,
"publisher": "Harper Collins",
"status": "read"
}
Checking status on Object { title: "The Complete Robot", author: "Isaac Asimov", isbn_13: "0414772405062", pub_date: 1982, publisher: "Harper Collins", status: "reading" }
Checking status on Object { title: "The Complete Robot", author: "Isaac Asimov", isbn_13: "0414772405062", pub_date: 1982, publisher: "Harper Collins", status: "read" }
Checking status on Object { title: "Foundation", author: "Isaac Asimov", isbn_13: "10101010101010", pub_date: 1957, publisher: "Doubleday", status: "on shelf" }
Checking status on Object { title: "Foundation", author: "Isaac Asimov", isbn_13: "10101010101010", pub_date: 1957, publisher: "Doubleday", status: "reading" }
Checking status on Object { title: "Magical Magyars", author: "David Bailey", isbn_13: "0956218891011", pub_date: 2020, publisher: "Pitch", status: "loaned out" }
Checking status on Object { title: "Magical Magyars", author: "David Bailey", isbn_13: "0956218891011", pub_date: 2020, publisher: "Pitch", status: "on shelf" }
Checking status on Object { title: "CSS In Depth", author: "Jim Smith", isbn_13: "10101010101", pub_date: 2019, publisher: "O'Reilly", status: "on shelf" }
Checking status on Object { title: "CSS In Depth", author: "Jim Smith", isbn_13: "10101010101", pub_date: 2019, publisher: "O'Reilly", status: "reading" }
Checking status on Object { title: "World Atlas", author: "n/a", isbn_13: "0689213952728", pub_date: 2021, publisher: "Collins", status: "on coffee table" }
Checking status on Object { title: "World Atlas", author: "n/a", isbn_13: "0689213952728", pub_date: 2021, publisher: "Collins", status: "loaned out" }