Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add files via upload #658

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
117 changes: 117 additions & 0 deletions _notebooks/CSSE/Lessons/Classes_and_Methods/2025-01-07-Homework.ipynb
Original file line number Diff line number Diff line change
@@ -0,0 +1,117 @@
{
"cells": [
{
"cell_type": "raw",
"metadata": {
"vscode": {
"languageId": "raw"
}
},
"source": [
"---\n",
"layout: post\n",
"title: Homework\n",
"description: Homework for classes and methods lessons.\n",
"type: issues \n",
"comments: true\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Homework "
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# JavaScript Classes and Methods - Interactive Homework\n",
"In this notebook, you will learn about classes and methods in JavaScript. After the lesson, complete the tasks by editing the code cells.\n",
"\n",
"### What are Classes and Methods?\n",
"- **Class**: A blueprint for creating objects with properties and methods.\n",
"- **Method**: A function inside a class that defines an object's behavior.\n",
"\n"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Example: Class for food\n",
"\n",
"Below is an example of a JavaScript class for creating different foods. The class has:\n",
"1. A **constructor** to initialize properties (brand and model).\n",
"2. Two **methods** (`displayInfo` and `start`) to define behaviors.\n"
]
},
{
"cell_type": "code",
"execution_count": 8,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [
{
"data": {
"application/javascript": "// Example: A Class for Cars\nclass Car {\n constructor(brand, model) {\n this.brand = brand; // Property\n this.model = model; // Property\n }\n\n displayInfo() {\n console.log(`This car is a ${this.brand} ${this.model}.`);\n }\n\n start() {\n console.log(`${this.brand} ${this.model} is starting...`);\n }\n}\n\n// Create an instance of the class\nconst myCar = new Car(\"Tesla\", \"Model S\");\nmyCar.displayInfo();\nmyCar.start();\n",
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%js\n",
"// Example: A Class for Cars\n",
"class Car {\n",
" constructor(brand, model) {\n",
" this.brand = brand; // Property\n",
" this.model = model; // Property\n",
" }\n",
"\n",
" displayInfo() {\n",
" console.log(`This car is a ${this.brand} ${this.model}.`);\n",
" }\n",
"\n",
" start() {\n",
" console.log(`${this.brand} ${this.model} is starting...`);\n",
" }\n",
"}\n",
"\n",
"// Create an instance of the class\n",
"const myCar = new Car(\"Tesla\", \"Model S\");\n",
"myCar.displayInfo();\n",
"myCar.start();\n"
]
}
],
"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.9.6"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
{
"cells": [
{
"cell_type": "raw",
"metadata": {
"vscode": {
"languageId": "raw"
}
},
"source": [
"---\n",
"layout: post\n",
"title: Lesson One - Methods \n",
"description: First lesson for classes and methods.\n",
"type: issues \n",
"comments: true\n",
"---"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"## Lesson 1- Methods\n",
"By Nico Orozco\n",
"\n",
"### What are Methods?\n",
"Methods are the operation completed in a code that give your objects a fucnction. In JavaScrpit code, methods are used for actions such as manipulating data, peforming task, and defining other code oppertaions. The benefits of using methods is being able to reuse the fucntions and the methods are very modular. Another benefit of using methods is that it will give a more efficent purpose to the DOM (Direct Object Model) which is very important for updating your webpage.\n",
"\n",
"### 1. Manipulating the Data\n",
" \n",
"There are two different ways to manipulate your data in JavaScript:\n",
"#### ARRAYS & STRINGS\n",
"\n",
"Array methods are used to change how the array of data in the code will act, for example:\n"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"arr = ['Mozzrella', 'provolone', 'cheddar'];\n",
"arr.push('MontereyJack');\n",
"\n",
"console.log(arr); ['Mozzrella', 'provolone', 'cheddar', 'MontereyJack']"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In this example the ``arr.push('MontereyJack')`` added our MontereyJack to the array list of other items that we originally had. \n",
"\n",
"#### These are the list of Methods one would use in an array:\n",
"\n",
"- ``push()`` – Adds an element to the end of an array.\n",
"- ``pop()`` – Removes the last element from an array.\n",
"- ``shift()`` – Removes the first element from an array.\n",
"- ``unshift()`` – Adds an element to the beginning of an array.\n",
"- ``sort()`` – Sorts the elements of an array in ascending order.\n",
"- ``reverse()`` – Reverses the order of the elements in an array.\n",
"____________________________________________________________________________________________________________________________________"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"String Methods are used to change how the string will work such as the length and format. "
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"let str = 'I like chocolate milk';\n",
"let length = str.length;\n",
"\n",
"console.log(length); // 21"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In this the string methods is used to find out how many characters are in the string of the sentance using the \n",
"``lenght()`` method \n",
"\n",
"#### These are the list of Methods one would use in a string:\n",
"\n",
"- ``length()`` – Returns the length of a string.\n",
"- ``indexOf()`` – Returns the index of a specified character in a string.\n",
"- ``charAt()`` – Returns the character at a specified index in a string.\n",
"- ``substring()`` – Returns a substring of a specified string.\n",
"- ``toUpperCase()`` – Converts a string to uppercase.\n",
"- ``toLowerCase()`` – Converts a string to lowercase.\n",
"- ``trim()`` – Removes leading and trailing whitespace from a string."
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"### 2. Constructing in JavaScript\n",
"\n",
"Methods are also used to make and consturct words in your classes (which you will learn in the next lessson). These can be used to customize your data with in the classes. For example:"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"vscode": {
"languageId": "javascript"
}
},
"outputs": [],
"source": [
"%%js\n",
"class Items {\n",
" constructor(food, year) {\n",
" this.food = food;\n",
" this.year = year;\n",
" }\n",
" \n",
" // A method of the class\n",
" greet() {\n",
" console.log(`There are ${this.food} and the expiration year is ${this.year}.`);\n",
" }\n",
" }\n",
" \n",
" // Creating an instance of the class\n",
" const Item1 = new Item('Frosted Flakes', 2025);\n",
" Item1.greet(); // Output: There are Frosted Flakes and the expiration year is 2025\n",
" "
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"In this example we created an ``Item`` that creates a sentance of when the expiration date is. Within our class we constructed a customizable sentance with our code. \n",
"\n",
"<i>In the next lesson you will be learning how the Classes in code are related to our methods that we used<i>"
]
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3 (ipykernel)",
"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.10.12"
}
},
"nbformat": 4,
"nbformat_minor": 2
}
Loading