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.
266 lines
8.0 KiB
266 lines
8.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">Code Sample 1</h2> |
|
<p>This is the JavaScrip code I wrote for the exercise, Build a New Object and the output to the console that it generates. The code creates two objects, a microphone and a cd.</p> |
|
<p>The microphone object is relatively simple, it has four properties and one method which accepts a string of text and "records" it by assigning it to the text property. Incidentally, I had just purchased a new microphone when I was writing this code, so the object is based on that new microphone.</p> |
|
<p>The cd object is actually more complex although it doesn't have any methods. It also has four properties, but one of these, tracks, is an object which is made up of 15 separate objects. Each of the 15 objects is an individiual track with two properties, title and writer. This is not the best way to code an object like this, in all likelihood, the tracks would be an array of tracks rather than indovidual objects, but this method is more in keeping with this stage of the course. Arrays will be covered in chapter 7.</p> |
|
<h2 class="sectiontitle">The JavaScript Code</h2> |
|
<pre class="codesample"> |
|
/** |
|
* Practice: Building objects |
|
* |
|
* - Create JavaScript objects based on objects in your current environment. |
|
* - Give each object an identifiable name. |
|
* - Create properties to describe the objects and set their values. |
|
* - Find an object that has another object inside of it to create a nested object. |
|
* - Test your objects in the browser console by accessing the entire object and its specific properties. |
|
*/ |
|
|
|
const microphone = { |
|
brand: "Blue", |
|
colour: "Silver", |
|
price: 92.65, |
|
text: "", |
|
|
|
record: function (speech) { |
|
this.text = speech; |
|
}, |
|
}; |
|
|
|
const cd = { |
|
title: "One Step Beyond", |
|
artist: "Madness", |
|
release: 1979, |
|
tracks: { |
|
track1: { |
|
title: "One Step Beyond", |
|
writer: "Cecil Campbell", |
|
}, |
|
track2: { |
|
title: "My Girl", |
|
writer: "Mike Barson", |
|
}, |
|
track3: { |
|
title: "Night Boat to Cairo", |
|
writer: "Graham McPherson, Mike Barson", |
|
}, |
|
track4: { |
|
title: "Believe Me", |
|
writer: "John Hasler, Mike Barson", |
|
}, |
|
track5: { |
|
title: "Land of Hope and Glory", |
|
writer: "Lee Jay Thompson", |
|
}, |
|
track6: { |
|
title: "The Prince", |
|
writer: "Lee Jay Thompson", |
|
}, |
|
track7: { |
|
title: "Tarzan's Nuts", |
|
writer: "Chas Smash, Mike Barson, Sydney Lee", |
|
}, |
|
track8: { |
|
title: "In the Middle of the Night", |
|
writer: "Chris Foreman, Graham McPherson", |
|
}, |
|
track9: { |
|
title: "Bed and Breakfast Man", |
|
writer: "Mike Barson", |
|
}, |
|
track10: { |
|
title: "Razor Blade Alley", |
|
writer: "Lee Jay Thompson", |
|
}, |
|
track11: { |
|
title: "Swan Lake", |
|
writer: "Pyotr Ilyich Tchaikovsky; arranged by Barson", |
|
}, |
|
track12: { |
|
title: "Rockin' in A flat", |
|
writer: "Willy Wurlitzer", |
|
}, |
|
track13: { |
|
title: "Mummy's Boy", |
|
writer: "Mark Bedford", |
|
}, |
|
track14: { |
|
title: "Madness", |
|
writer: "Cecil Campbell", |
|
}, |
|
track15: { |
|
title: "Chipmunks Are Go", |
|
writer: "Brendan Smith", |
|
}, |
|
}, |
|
}; |
|
|
|
/* |
|
Some code to test these objects |
|
*/ |
|
console.log("The microphone object: ", microphone); |
|
console.log("The microphone brand:", microphone.brand); |
|
console.log("The microphone colour: ", microphone.colour); |
|
console.log("Activating the microphone."); |
|
microphone.record("Jo reggelt!"); |
|
console.log("The microphone recorded: ", microphone.text); |
|
|
|
/* The microphone object */ |
|
console.log("The cd is by ", cd.artist); |
|
console.log("The cd is called ", cd.title); |
|
console.log("The cd tracks are ", cd.tracks); |
|
console.log("Track 1: ", cd.tracks.track1); |
|
console.log("Track 1 is called", cd.tracks.track1.title); |
|
console.log("Track 1 is written by ", cd.tracks.track1.writer); |
|
console.log("Track 6: ", cd.tracks.track6); |
|
console.log("Track 6 is called", cd.tracks.track6.title); |
|
console.log("Track 6 is written by ", cd.tracks.track6.writer); |
|
console.log("Track 11: ", cd.tracks.track11); |
|
console.log("Track 11 is called", cd.tracks.track11.title); |
|
console.log("Track 11 is written by ", cd.tracks.track11.writer); |
|
console.log("Track 15: ", cd.tracks.track15); |
|
console.log("Track 15 is called", cd.tracks.track15.title); |
|
console.log("Track 15 is written by ", cd.tracks.track15.writer);</pre> |
|
<h2 class="sectiontitle">Output to the Console</h2> |
|
<pre class="codesample"> |
|
The microphone object: |
|
{ |
|
"brand": "Blue", |
|
"colour": "Silver", |
|
"price": 92.65, |
|
"text": "Jo reggelt!" |
|
} |
|
The microphone brand: Blue |
|
The microphone colour: Silver |
|
Activating the microphone. |
|
The microphone recorded: Jo reggelt! |
|
The cd is by Madness |
|
The cd is called One Step Beyond |
|
The cd tracks are |
|
{ |
|
"track1": { |
|
"title": "One Step Beyond", |
|
"writer": "Cecil Campbell" |
|
}, |
|
"track2": { |
|
"title": "My Girl", |
|
"writer": "Mike Barson" |
|
}, |
|
"track3": { |
|
"title": "Night Boat to Cairo", |
|
"writer": "Graham McPherson, Mike Barson" |
|
}, |
|
"track4": { |
|
"title": "Believe Me", |
|
"writer": "John Hasler, Mike Barson" |
|
}, |
|
"track5": { |
|
"title": "Land of Hope and Glory", |
|
"writer": "Lee Jay Thompson" |
|
}, |
|
"track6": { |
|
"title": "The Prince", |
|
"writer": "Lee Jay Thompson" |
|
}, |
|
"track7": { |
|
"title": "Tarzan's Nuts", |
|
"writer": "Chas Smash, Mike Barson, Sydney Lee" |
|
}, |
|
"track8": { |
|
"title": "In the Middle of the Night", |
|
"writer": "Chris Foreman, Graham McPherson" |
|
}, |
|
"track9": { |
|
"title": "Bed and Breakfast Man", |
|
"writer": "Mike Barson" |
|
}, |
|
"track10": { |
|
"title": "Razor Blade Alley", |
|
"writer": "Lee Jay Thompson" |
|
}, |
|
"track11": { |
|
"title": "Swan Lake", |
|
"writer": "Pyotr Ilyich Tchaikovsky; arranged by Barson" |
|
}, |
|
"track12": { |
|
"title": "Rockin' in A flat", |
|
"writer": "Willy Wurlitzer" |
|
}, |
|
"track13": { |
|
"title": "Mummy's Boy", |
|
"writer": "Mark Bedford" |
|
}, |
|
"track14": { |
|
"title": "Madness", |
|
"writer": "Cecil Campbell" |
|
}, |
|
"track15": { |
|
"title": "Chipmunks Are Go", |
|
"writer": "Brendan Smith" |
|
} |
|
} |
|
Track 1: |
|
{ |
|
"title": "One Step Beyond", |
|
"writer": "Cecil Campbell" |
|
} |
|
Track 1 is called One Step Beyond |
|
Track 1 is written by Cecil Campbell |
|
Track 6: |
|
{ |
|
"title": "The Prince", |
|
"writer": "Lee Jay Thompson" |
|
} |
|
Track 6 is called The Prince |
|
Track 6 is written by Lee Jay Thompson |
|
Track 11: |
|
{ |
|
"title": "Swan Lake", |
|
"writer": "Pyotr Ilyich Tchaikovsky; arranged by Barson" |
|
} |
|
Track 11 is called Swan Lake |
|
Track 11 is written by Pyotr Ilyich Tchaikovsky; arranged by Barson |
|
Track 15: |
|
{ |
|
"title": "Chipmunks Are Go", |
|
"writer": "Brendan Smith" |
|
} |
|
Track 15 is called Chipmunks Are Go |
|
Track 15 is written by Brendan Smith</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> |