Skip to content

Commit

Permalink
Merge pull request #561 from Parallaxes/main
Browse files Browse the repository at this point in the history
Finished JS Classes & Methods Lesson
  • Loading branch information
jm1021 authored Nov 5, 2024
2 parents 52dada2 + 8a19c1d commit 44cfbe5
Show file tree
Hide file tree
Showing 4 changed files with 538 additions and 22 deletions.
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "yaml"
}
},
"outputs": [],
"source": [
"---\n",
"comments: true\n",
"layout: post\n",
"title: Javascript Classes and Methods \n",
"description: Popcorn hack 1 \n",
"categories: [JavaScript]\n",
"comments: True\n",
"title: JavaScript Classes & Methods Introduction\n",
"description: An introduction to JavaScript Classes & Methods\n",
"author: Lucas Masterson\n",
"permalink: /csse/javascript/fundamentals/classes/intro/\n",
"categories: [JavaScript Fundamentals]\n",
"---"
]
},
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,26 @@
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "yaml"
}
},
"outputs": [],
"source": [
"---\n",
"comments: true\n",
"layout: post\n",
"title: JavaScript Methods\n",
"description: An in-depth look at JavaScript methods.\n",
"author: Alex Van Linge & Lucas Masterson (reviewer)\n",
"permalink: /csse/javascript/fundamentals/classes/methods/\n",
"categories: [JavaScript Fundamentals]\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
Expand All @@ -10,7 +31,7 @@
"Now that we have some of the basics out of the way, now it is time to go into methods in greater detail and depth than what was mentioned in the intro.\n",
"\n",
"## Defining Methods \n",
"Methods in JavaScript are essentially functions inside of objects. Methods are defined on the prototype of each class and shared by all instances."
"Methods in JavaScript are essentially functions inside of objects. To refresh your memory, objects are anything with Key-Value Pairs inside of them (ex: Name: \"Alex\"), and functions are blocks of code that perform specific tasks or actions, like console.log."
]
},
{
Expand Down Expand Up @@ -68,7 +89,7 @@
"source": [
"## Accessor Methods\n",
"\n",
"A variant of methods that can be particularly useful in many scenarios are `Accessor Methods`. Accessor methods are functions defined within a class that allow you to retrieve (access) the values of the object's properties without modifying them. \n",
"A variant of methods that can be particularly useful in many scenarios are `Accessor Methods`. Accessor methods are functions defined within an object that allow you to retrieve (access) the values of the object's properties without modifying them. \n",
"\n",
"Accessor methods make debugging code much easier and just make the code as a whole more cohesive and consistent.\n"
]
Expand Down Expand Up @@ -189,13 +210,6 @@
"// person.setAge(-5); // Output: \"Please enter a valid age.\""
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"Generally speaking, you won't use generator or async at an intro level, so we can skip them as of now. If you're interested, you can find the JavaScript MDN Web Docs on methods."
]
},
{
"cell_type": "markdown",
"metadata": {},
Expand All @@ -204,7 +218,7 @@
"\n",
"For the popcorn hack, use this code cell below and create an object that must include these three things \n",
"\n",
" - A constructor to build class instances\n",
" - Four Key-Value Pairs that at least include your name, age, and two others of your choosing\n",
" - Accessor methods (At least 2)\n",
" - Mutator methods (At least 2 as well) \n",
" "
Expand All @@ -225,13 +239,13 @@
"// Have Fun!\n",
"\n",
"class Person {\n",
" // Define the constructor here\n",
" // Define Key-Value Pairs\n",
"\n",
"\n",
" // Method of choosing can go here\n",
" // Methods of choosing can go here\n",
"\n",
"\n",
" // Method of choosing can go here\n",
" // Methods of choosing go here\n",
"\n",
"\n",
"}\n",
Expand All @@ -258,9 +272,7 @@
"2. W3Schools.com. https://www.w3schools.com/js/js_classes.asp\n",
"\n",
"****\n",
"*Building The Future And Keeping The Past Alive Are One In The Same Thing.*\n",
"\n",
"*Anything that can go wrong will go wrong.*"
"*Building The Future And Keeping The Past Alive Are One In The Same Thing.*"
]
}
],
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
{
"cells": [
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "yaml"
}
},
"outputs": [],
"source": [
"---\n",
"comments: true\n",
"layout: post\n",
"title: JavaScript Classes & Methods Homework\n",
"description: The JavaScript Classes & Methods Homework assignment for the JavaScript Fundamentals course.\n",
"author: Lucas Masterson\n",
"permalink: /csse/javascript/fundamentals/classes/hw/\n",
"categories: [JavaScript Fundamentals]\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Classes & Methods Homework\n",
"****"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Homework!\n",
"\n",
"As you read through this, notice the new content introduced. We encourage you to do your own research (this can be Google, ChatGPT, documentation, etc.). Here, we introduce the `_` property (memory safety), `extends` keyword, and `super()` method.\n",
"\n",
"To complete the homework, implement the `TODO:` comments. The example usage should guide you and work if all implementation is done correctly. Have fun! \n",
"\n",
"*If anything simply cannot go wrong, it will anyway.*"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"application/javascript": "\nclass Aircraft {\n constructor(model, capacity, range) {\n this._model = model;\n this._capacity = capacity;\n this._range = range;\n }\n\n // Getter for model\n get model() {\n return this._model;\n }\n\n // Setter for model\n set model(newModel) {\n this._model = newModel;\n }\n\n // Getter for capacity\n get capacity() {\n return this._capacity;\n }\n\n // Setter for capacity\n set capacity(newCapacity) {\n this._capacity = newCapacity;\n }\n\n // Getter for range\n get range() {\n return this._range;\n }\n\n // Setter for range\n set range(newRange) {\n this._range = newRange;\n }\n\n // Method to display aircraft details\n displayDetails() {\n return `Model: ${this._model}, Capacity: ${this._capacity}, Range: ${this._range} km`;\n }\n\n // Static method\n static compareRange(aircraft1, aircraft2) {\n return aircraft1.range - aircraft2.range;\n }\n}\n\n// Example usage\nlet boeing = new Aircraft('Boeing 747', 416, 13800);\nlet airbus = new Aircraft('Airbus A380', 853, 15700);\n\nconsole.log(boeing.displayDetails());\nconsole.log(airbus.displayDetails());\nconsole.log(`Range difference: ${Aircraft.compareRange(boeing, airbus)} km`);\nclass FighterJet extends Aircraft {\n constructor(model, capacity, range, speed) {\n super(model, capacity, range);\n this._speed = speed;\n }\n\n // Getter for speed\n get speed() {\n return this._speed;\n }\n\n // Setter for speed\n set speed(newSpeed) {\n this._speed = newSpeed;\n }\n\n // Method to display fighter jet details\n displayDetails() {\n return `Model: ${this._model}, Capacity: ${this._capacity}, Range: ${this._range} km, Speed: ${this._speed} km/h`;\n }\n}\n\n// Example usage\nlet f16 = new FighterJet('F-16', 1, 4220, 2400);\nlet f22 = new FighterJet('F-22', 1, 2960, 2410);\n\nconsole.log(f16.displayDetails());\nconsole.log(f22.displayDetails());\nconsole.log(`Range difference: ${Aircraft.compareRange(f16, f22)} km`);\n",
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"\n",
"class Aircraft {\n",
" // Constructor\n",
" constructor(model, capacity, range) {\n",
" this._model = model; // _model is a convention to indicate that it's a private property\n",
" this._capacity = capacity; // _capacity is a convention to indicate that it's a private property\n",
" this._range = range; // _range is a convention to indicate that it's a private property\n",
" }\n",
"\n",
" // Getter for model\n",
" get model() {\n",
" return this._model;\n",
" }\n",
"\n",
" // Setter for model\n",
" set model(newModel) {\n",
" this._model = newModel;\n",
" }\n",
"\n",
" // Getter for capacity\n",
" get capacity() {\n",
" return this._capacity;\n",
" }\n",
"\n",
" // Setter for capacity\n",
" set capacity(newCapacity) {\n",
" this._capacity = newCapacity;\n",
" }\n",
"\n",
" // Getter for range\n",
" get range() {\n",
" // TODO: get the range\n",
" }\n",
"\n",
" // Setter for range\n",
" set range(newRange) {\n",
" // TODO: set the range\n",
" }\n",
"\n",
" // Method to display aircraft details\n",
" displayDetails() {\n",
" // TODO: display the details (model, capacity, range)\n",
" }\n",
"\n",
" // Static method to compare range\n",
" static compareRange(aircraft1, aircraft2) {\n",
" return aircraft1.range - aircraft2.range;\n",
" }\n",
"}\n",
"\n",
"// Example usage\n",
"let boeing = new Aircraft('Boeing 747', 416, 13800);\n",
"let airbus = new Aircraft('Airbus A380', 853, 15700);\n",
"\n",
"console.log(boeing.displayDetails());\n",
"console.log(airbus.displayDetails());\n",
"console.log(`Range difference: ${Aircraft.compareRange(boeing, airbus)} km`);\n",
"\n",
"// New content in the HW! Lo and behold, the FighterJet class! \n",
"// For 1) do research. What does the extend keyword do in JavaScript?\n",
"// Here's a quick rundown if you're in a hurry: \n",
"// the extends keyword creates a child class (FighterJet) that inherits from a parent class (Aircraft).\n",
"class FighterJet extends Aircraft {\n",
" constructor(model, capacity, range, speed) {\n",
" super(model, capacity, range); // We call the parent class constructor with super\n",
" this._speed = speed;\n",
" }\n",
"\n",
" // TODO: Getter for speed\n",
" // Remember to use the _speed property for memory safety\n",
"\n",
" // TODO: Setter for speed\n",
" // Remember to use the _speed property and add a function paramater.\n",
"\n",
" // TODO: Method to display fighter jet details (model, capacity, range, speed)\n",
"}\n",
"\n",
"// Example usage\n",
"let f16 = new FighterJet('F-16', 1, 4220, 2400);\n",
"let f22 = new FighterJet('F-22', 1, 2960, 2410);\n",
"\n",
"console.log(f16.displayDetails());\n",
"console.log(f22.displayDetails());\n",
"console.log(`Range difference: ${Aircraft.compareRange(f16, f22)} km`);"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"****\n",
"\n",
"*If you perceive that there are four possible ways in which a procedure can go wrong, and circumvent these, then a fifth way, unprepared for, will promptly develop.*\n",
"\n",
"*You have no purpose because you fear to seek one. That fear is your failure. Your fear brings you pain. We know pain. Our purpose is its end.*"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.12.3"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Loading

0 comments on commit 44cfbe5

Please sign in to comment.