|
|
|
|
<!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">book.html</h2>
|
|
|
|
|
<pre class="codesample">
|
|
|
|
|
<!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></pre>
|
|
|
|
|
<h2 class="sectiontitle">Book.js</h2>
|
|
|
|
|
<pre class="codesample">
|
|
|
|
|
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;</pre>
|
|
|
|
|
<h2 class="sectiontitle">script.js</h2>
|
|
|
|
|
<pre class="codesample">
|
|
|
|
|
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);</pre>
|
|
|
|
|
<h2 class="sectiontitle">Output</h2>
|
|
|
|
|
<pre class="codesample">
|
|
|
|
|
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" }</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>
|
