You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
241 lines
8.2 KiB
241 lines
8.2 KiB
<!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> |