Merge pull request #13559 from IanTeo/fix/es6-formatting
Reformatted instructions for the class ES6 challenges
This commit is contained in:
@ -670,30 +670,22 @@
|
||||
"id": "587d7b8b367417b2b2512b53",
|
||||
"title": "class Syntax",
|
||||
"description": [
|
||||
"ES6 provides a new syntax to help create objects, using the keyword class.",
|
||||
"This is to be noted, that the class syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.",
|
||||
"In ES5, we usually define a constructor function, and use the new keyword to instantiate an object.",
|
||||
"<code> var spaceShuttle = function(targetPlanet){</code>",
|
||||
"<code> this.targetPlanet = targetPlanet; </code>",
|
||||
"<code>}</code>",
|
||||
"<code> var zeus = new spaceShuttle('Jupiter');</code>",
|
||||
"ES6 provides a new syntax to help create objects, using the keyword <dfn>class</dfn>.",
|
||||
"This is to be noted, that the <code>class</code> syntax is just a syntax, and not a full-fledged class based implementation of object oriented paradigm, unlike in languages like Java, or Python, or Ruby etc.",
|
||||
"In ES5, we usually define a constructor function, and use the <code>new</code> keyword to instantiate an object.",
|
||||
"<blockquote>var SpaceShuttle = function(targetPlanet){<br> this.targetPlanet = targetPlanet;<br>}<br>var zeus = new spaceShuttle('Jupiter');</blockquote>",
|
||||
"The class syntax simply replaces the constructor function creation:",
|
||||
"<code>class spaceShuttle {</code>",
|
||||
"<code> constructor(targetPlanet){</code>",
|
||||
"<code> this.targetPlanet = targetPlanet;</code>",
|
||||
"<code> }</code>",
|
||||
"<code>}</code>",
|
||||
"<code>const zeus = new spaceShuttle('Jupiter');</code>",
|
||||
"Notice that the class keyword declares a new function, and a constructor was added, which would be invoked when new is called - to create a new object.",
|
||||
"Instructions",
|
||||
"Use class keyword and write a proper constructor to create the vegetable class.",
|
||||
"The Vegetable lets you create a vegetable object, with a property name, to be passed to constructor."
|
||||
"<blockquote>class SpaceShuttle {<br> constructor(targetPlanet){<br> this.targetPlanet = targetPlanet;<br> }<br>}<br>const zeus = new spaceShuttle('Jupiter');</blockquote>",
|
||||
"Notice that the <code>class</code> keyword declares a new function, and a constructor was added, which would be invoked when <code>new</code> is called - to create a new object.",
|
||||
"<hr>",
|
||||
"Use <code>class</code> keyword and write a proper constructor to create the <code>Vegetable</code> class.",
|
||||
"The <code>Vegetable</code> lets you create a vegetable object, with a property <code>name</code>, to be passed to constructor."
|
||||
],
|
||||
"challengeSeed": [
|
||||
"/* Alter code below this line */",
|
||||
"const Vegetable = undefined;",
|
||||
"/* Alter code above this line */",
|
||||
"const carrot = new Vegetable('carrot')",
|
||||
"const carrot = new Vegetable('carrot');",
|
||||
"console.log(carrot.name); // => should be 'carrot'"
|
||||
],
|
||||
"tests": [
|
||||
@ -711,31 +703,15 @@
|
||||
"title": "class getters and setters",
|
||||
"description": [
|
||||
"You can obtain values from an object, and set a value of a property within an object.",
|
||||
"These are classically called getters and setters.",
|
||||
"These are classically called <dfn>getters</dfn> and <dfn>setters</dfn>.",
|
||||
"Getter functions are meant to simply return (get) the value of an object's private variable to the user without the user directly accessing the private variable.",
|
||||
"Setter functions are meant to modify (set) the value of an object's private variable based on the value passed into the setter function. This change could involve calculations, or even overwriting the previous value completely.",
|
||||
"<code>class Book {</code>",
|
||||
"<code> constructor(author) {</code>",
|
||||
"<code> this._author = author;</code>",
|
||||
"<code> }</code>",
|
||||
"<code> // getter</code>",
|
||||
"<code> get writer(){</code>",
|
||||
"<code> return this._author;</code>",
|
||||
"<code> }</code>",
|
||||
"<code> // setter</code>",
|
||||
"<code> set writer(updatedAuthor){</code>",
|
||||
"<code> this._author = updatedAuthor;</code>",
|
||||
"<code> }</code>",
|
||||
"<code>}</code>",
|
||||
"<code>const lol = new Book('anonymous');</code>",
|
||||
"<code>console.log(lol.writer);</code>",
|
||||
"<code>lol.writer = 'wut';</code>",
|
||||
"<code>console.log(lol.writer);</code>",
|
||||
"<blockquote>class Book {<br> constructor(author) {<br> this._author = author;<br> }<br> // getter<br> get writer(){<br> return this._author;<br> }<br> // setter<br> set writer(updatedAuthor){<br> this._author = updatedAuthor;<br> }<br>}<br>const lol = new Book('anonymous');<br>console.log(lol.writer);<br>lol.writer = 'wut';<br>console.log(lol.writer);</blockquote>",
|
||||
"Notice the syntax we are using to invoke the getter and setter - as if they are not even functions.",
|
||||
"Getters and setters are important, because they hide internal implementation details.",
|
||||
"Instructions",
|
||||
"Use class keyword to create a Thermostat class. The constructor accepts Farenheit temperature.",
|
||||
"Now create getter and setter in the class, to obtain the temperature in Celsius scale.",
|
||||
"<hr>",
|
||||
"Use <code>class</code> keyword to create a Thermostat class. The constructor accepts Farenheit temperature.",
|
||||
"Now create <code>getter</code> and <code>setter</code> in the class, to obtain the temperature in Celsius scale.",
|
||||
"Remember that <code>F = C * 9.0 / 5 + 32</code>, where F is the value of temperature in Fahrenheit scale, and C is the value of the same temperature in Celsius scale",
|
||||
"Note",
|
||||
"When you implement this, you would be tracking the temperature inside the class in one scale - either Fahrenheit or Celsius.",
|
||||
|
Reference in New Issue
Block a user