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.
103 lines
3.0 KiB
103 lines
3.0 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]--> |
|
</head> |
|
<body> |
|
|
|
<h1 class="courselink">JavaScript Essential Training</h1> |
|
<h2 class="lecturer">LinkedIn Learning : Morten Rand-Hendriksen</h2> |
|
<h1 class="episodetitle">Code Samples</h1> |
|
|
|
<article> |
|
<h2 class="sectiontitle">Object Blueprints</h2> |
|
<p>These are the JavaScript files from the chapter, Classes: Object Blueprints. The first file, Backpack.js, defines the class. The second, script.js, creates an instance of the class and then outputs the object and one of its properties to the console.</p> |
|
<h2 class="sectiontitle">The Backpack.js file</h2> |
|
<pre class="codesample"> |
|
/** |
|
* Creating classes: |
|
* |
|
* Class declaration: class Name {} |
|
* Class expression: const Name = class {} |
|
*/ |
|
|
|
class Backpack { |
|
constructor( |
|
// Defines parameters: |
|
name, |
|
volume, |
|
color, |
|
pocketNum, |
|
strapLengthL, |
|
strapLengthR, |
|
lidOpen |
|
) { |
|
// Define properties: |
|
this.name = name; |
|
this.volume = volume; |
|
this.color = color; |
|
this.pocketNum = pocketNum; |
|
this.strapLength = { |
|
left: strapLengthL, |
|
right: strapLengthR, |
|
}; |
|
this.lidOpen = lidOpen; |
|
} |
|
// Add methods like normal functions: |
|
toggleLid(lidStatus) { |
|
this.lidOpen = lidStatus; |
|
} |
|
newStrapLength(lengthLeft, lengthRight) { |
|
this.strapLength.left = lengthLeft; |
|
this.strapLength.right = lengthRight; |
|
} |
|
} |
|
|
|
export default Backpack;</pre> |
|
<h2 class="sectiontitle">script.js</h2> |
|
<pre class="codesample"> |
|
/** |
|
* Create a class for the Backpack object type. |
|
* @link https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes |
|
*/ |
|
import Backpack from "./Backpack.js"; |
|
|
|
const everydayPack = new Backpack( |
|
"Everyday Backpack", |
|
30, |
|
"grey", |
|
15, |
|
26, |
|
26, |
|
false |
|
); |
|
|
|
console.log("The everydayPack object:", everydayPack); |
|
console.log("The pocketNum value:", everydayPack.pocketNum);</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> |