classes and methods file dragging into my repo

_notebooks/CSSE/Lessons/Classes_and_Methods/2024-10-27-classes-intro.ipynb

@@ -0,0 +1,312 @@
+{
+ "cells": [
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "yaml"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "---\n",
+    "comments: true\n",
+    "layout: post\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",
+    "---"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "# Intro to JavaScript Classes & Methods\n",
+    "****\n",
+    "\n",
+    "Welcome to Object Oriented Programming (OOP)! The beginning of the end as I'd like to call it. Have fun with Java and C++ in the future... or you can use Rust!\n",
+    "\n",
+    "## Defining Classes\n",
+    "Classes in JavaScript are special functions that provide a more convenient and syntactically cleaner way to create objects and deal with inheritance. Just as you can define function expressions and function declarations, a class can be defined in two ways: a class expression or a class declaration."
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "javascript"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Not intended to be run, just to show the syntax\n",
+    "\n",
+    "// Declaration\n",
+    "class Rectangle {  \n",
+    "    // The `constructor` method is a special method of a class \n",
+    "    // for creating and initializing an object instance of that class.\n",
+    "    constructor(height, width) {\n",
+    "        // Here, `this` refers to the object instance. A placeholder,\n",
+    "        // if you will. It is used to access the object's properties.\n",
+    "        this.height = height;\n",
+    "        this.width = width;\n",
+    "    }\n",
+    "}\n",
+    "\n",
+    "// Expression; the class is anonymous but assigned to a variable\n",
+    "// Here, we are creating a class object without a name\n",
+    "const Rectangle = class {\n",
+    "    constructor(height, width) {\n",
+    "        this.height = height;\n",
+    "        this.width = width;\n",
+    "    }\n",
+    "}\n",
+    "\n",
+    "// Expression; the class has its own name\n",
+    "// Here, we are creating a class object with a name\n",
+    "const Rectangle = class Rectangle2 {\n",
+    "    constructor(height, width) {\n",
+    "        this.height = height;\n",
+    "        this.width = width;\n",
+    "    }\n",
+    "}"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Class Body\n",
+    "The body of a class is the part contained within the curly braces `{}`. There is where you define class members, like methods and the constructor.\n",
+    "\n",
+    "A class element can be characterized by three aspects:\n",
+    "- Kind: Getter, setter, method, or field\n",
+    "- Location: Static or instance\n",
+    "- Visbility: Public or private\n",
+    "\n",
+    "These will get their own topic sections later.\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## The Constructor Method\n",
+    "\n",
+    "The `constructor` method is a special method used to create and initialize an object created within a class. There can only be one special method with the name \"constructor\" in a class.\n",
+    "\n",
+    "For example, you can create instance properties inside the constructor:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "javascript"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "// Not intended to be run, just to show the syntax\n",
+    "\n",
+    "class Rectangle {\n",
+    "    constructor(height, width) {\n",
+    "        this.height = height;\n",
+    "        this.width = width;\n",
+    "    }\n",
+    "}  "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Methods\n",
+    "\n",
+    "Methods are defined on the initial class instance, and are shared by all children. Methods can be plain functions, async functions (async D:), generator functions, or async (sadge) generator functions.\n",
+    "\n",
+    "For example:"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": 7,
+   "metadata": {
+    "vscode": {
+     "languageId": "javascript"
+    }
+   },
+   "outputs": [
+    {
+     "data": {
+      "application/javascript": "\nclass Rectangle {\n    // Constructor\n    constructor(height, width) {\n        this.height = height;\n        this.width = width;\n    }\n\n    // Getter\n    get area() {\n        return this.calcArea();\n    }\n\n    // Method\n    calcArea() {\n        return this.height * this.width;\n    }\n\n    // Generator\n    *getSides() {\n        yield this.height;\n        yield this.width;\n        yield this.height;\n        yield this.width;\n    }\n}\n\nconst square = new Rectangle(10, 10);\n\nconsole.log(square.area); // 100\nconsole.log([...square.getSides()]); // [10, 10, 10, 10]\n  \n",
+      "text/plain": [
+       "<IPython.core.display.Javascript object>"
+      ]
+     },
+     "metadata": {},
+     "output_type": "display_data"
+    }
+   ],
+   "source": [
+    "%%js\n",
+    "\n",
+    "class Rectangle {\n",
+    "    // Constructor\n",
+    "    constructor(height, width) {\n",
+    "        this.height = height;\n",
+    "        this.width = width;\n",
+    "    }\n",
+    "\n",
+    "    // Getter\n",
+    "    get area() {\n",
+    "        return this.calcArea();\n",
+    "    }\n",
+    "\n",
+    "    // Method\n",
+    "    calcArea() {\n",
+    "        return this.height * this.width;\n",
+    "    }\n",
+    "\n",
+    "    // Generator\n",
+    "    *getSides() {\n",
+    "        yield this.height;\n",
+    "        yield this.width;\n",
+    "        yield this.height;\n",
+    "        yield this.width;\n",
+    "    }\n",
+    "}\n",
+    "\n",
+    "const square = new Rectangle(10, 10);\n",
+    "\n",
+    "console.log(square.area); // 100\n",
+    "console.log([...square.getSides()]); // [10, 10, 10, 10]\n",
+    "  "
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "So, what's going on here? (Thank god no async)\n",
+    "\n",
+    "### Constructor\n",
+    "As we know, the `constructor` method initializes the object. Ok, cool.\n",
+    "\n",
+    "### Get\n",
+    "As for the `get` getter method, this is used to get a specific property of the object. The line `return this.calcArea()` calls the `calcArea()` method, which calculates the area of the rectangle it returns it.\n",
+    "\n",
+    "### Function\n",
+    "The `calcArea()` function method calculates area of the rectangle using the height and width properties, and returns it.\n",
+    "\n",
+    "### Generator\n",
+    "The `*getSides()` generator method allows you to return (or \"yield\") multiple values lazily, meaning they are produced one at a time, when requested, rather than all at once.\n",
+    "\n",
+    "When you call `square.getSides()`, the generator doesn't immediately give you all four values. Instead it returns an iterator. You can then loop over this iterator, requesting one value at a time. By using the [...] spread operator (as in `console.log[...sqaure.getSides()])`), you're converting the iterator into an array containing all the yielded values.\n",
+    "\n",
+    "### Breakdown\n",
+    "We first define our class template in the `class Rectangle {}` line, with a few methods. The `constructor` method initializes the rectangle with two parameters: height and width. We then define a `get area() {}` method that returns the result of the `calcArea()` function. This `calcArea()` method multiplies the two properties of the constructed object, height and width to return the area. We have another generator function `*getSides() {}` that yields (one at a time) the values of each side length.\n",
+    "\n",
+    "Ohhhhhkay, that was a lot. Now what about the syntax at the bottom?\n",
+    "\n",
+    "The line `const square = new Rectangle(10, 10);` constructs an object with width of 10 and height of 10.\n",
+    "\n",
+    "We show getting the area by using the `area` method in `square.area` (we run a method on an object) to get 100, which goes through the entire aforementioned process.\n",
+    "\n",
+    "As for the `console.log([...square.getSides()]);` statement, this simply uses the [...] spread operator the print out the lengths of the sides as an array.\n",
+    "\n",
+    "****\n"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Popcorn Hack 1\n",
+    "\n",
+    "Construct a class `Triangle` that:\n",
+    "- **Constructs** a triangle\n",
+    "- **Gets** the area\n",
+    "- **Returns** the calculated area (method)\n",
+    "- **Genreates** the side lengths of the triangle"
+   ]
+  },
+  {
+   "cell_type": "code",
+   "execution_count": null,
+   "metadata": {
+    "vscode": {
+     "languageId": "javascript"
+    }
+   },
+   "outputs": [],
+   "source": [
+    "%%js\n",
+    "\n",
+    "class Triangle {\n",
+    "    // Construct the triangle with base and height here\n",
+    "\n",
+    "\n",
+    "    // Get the area of the triangle here\n",
+    "\n",
+    "\n",
+    "    // Calculate the area of the triangle here\n",
+    "\n",
+    "\n",
+    "    // Generate the sides of the triangle here\n",
+    "\n",
+    "\n",
+    "}\n",
+    "\n",
+    "/*\n",
+    "Uncomment this section once you have implemented the Triangle class\n",
+    "\n",
+    "const triangle = new Triangle(10, 5);\n",
+    "\n",
+    "console.log(triangle.calcArea()); // 25\n",
+    "console.log(triangle.area); // 25\n",
+    "console.log([...triangle.getSides()]); // [10, 5, 10]\n",
+    "*/"
+   ]
+  },
+  {
+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "## Sources\n",
+    "1. Classes - JavaScript | MDN. MDN Web Docs. 2024 Jul 25. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes\n",
+    "2. W3Schools.com. https://www.w3schools.com/js/js_classes.asp\n",
+    "\n",
+    "****\n",
+    "*Nothing is as easy as it looks.*"
+   ]
+  }
+ ],
+ "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
+}