Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
 didier amyot
|
c20bbefcf1 | ||
|
didier amyot
|
cdf1258831 | ||
|
didier amyot
|
8a72eec139 | ||
|
didier amyot
|
1569c514d4 | ||
|
didier amyot
|
f4fd5984f3 | ||
|
didier amyot
|
d3de0c0ad1 | ||
|
didier amyot
|
0fedae6143 | ||
|
didier amyot
|
a3872b028e | ||
|
didier amyot
|
5a6d3b15ac | ||
|
didier amyot
|
1f85f8145d | ||
|
didier amyot
|
1c3ad4fcbf | ||
|
didier amyot
|
0dd3b65a74 | ||
|
didier amyot
|
f792f15caa | ||
|
didier amyot
|
c3702e57c9 | ||
|
didier amyot
|
66fa2c4424 | ||
|
didier amyot
|
279d501098 | ||
|
didier amyot
|
8651ede879 | ||
|
didier amyot
|
7edf62204e | ||
|
didier amyot
|
1e7c3b5fbf | ||
|
didier amyot
|
d8fac33b96 | ||
|
didier amyot
|
ad0683528b | ||
|
didier amyot
|
b366ff6879 | ||
|
didier amyot
|
e2ecb3d49f |
No files matched your search
@@ -3,3 +3,4 @@
|
||||
node_modules
|
||||
package.json
|
||||
package-lock.json
|
||||
.ipynb_checkpoints
|
||||
@@ -0,0 +1,419 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "f003b793-ddf5-43b7-b557-3c6961a12483",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Ce que nous voulons, une classe qui définit un match de dodgeball!"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 33,
|
||||
"id": "a72f5733-4c3f-4a81-95a7-4ff0f486c292",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"[ \u001b[32m\"a\"\u001b[39m, \u001b[32m\"b\"\u001b[39m, \u001b[32m\"e\"\u001b[39m, \u001b[32m\"f\"\u001b[39m, \u001b[32m\"c\"\u001b[39m ]\n",
|
||||
"[ \u001b[32m\"d\"\u001b[39m ]\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"\n",
|
||||
"// partie de dodgeball\n",
|
||||
"\n",
|
||||
"class DodgeballGame{\n",
|
||||
"\n",
|
||||
" constructor(joueurs) {\n",
|
||||
" this.joueursEnVie = joueurs;\n",
|
||||
" this.joueursMorts = [];\n",
|
||||
" \n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" kill(joueur){\n",
|
||||
" this.joueursMorts.push(joueur);\n",
|
||||
" const nouveauJoueursEnVie = []\n",
|
||||
" for(const joueurEnVie of this.joueursEnVie){\n",
|
||||
" if(this.joueursMorts.indexOf(joueurEnVie) === -1){\n",
|
||||
" nouveauJoueursEnVie.push(joueurEnVie);\n",
|
||||
" }\n",
|
||||
" }\n",
|
||||
" this.joueursEnVie = nouveauJoueursEnVie;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" catchBall(){\n",
|
||||
" if(this.joueursMorts.length < 1){\n",
|
||||
" return;\n",
|
||||
" }\n",
|
||||
" const jesus = this.joueursMorts.shift();\n",
|
||||
" this.joueursEnVie.push(jesus);\n",
|
||||
" }\n",
|
||||
" \n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"let players = [\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"];\n",
|
||||
"\n",
|
||||
"let game = new DodgeballGame([\"a\", \"b\", \"c\", \"d\", \"e\", \"f\"]);\n",
|
||||
"game.kill(\"c\");\n",
|
||||
"game.kill(\"d\")\n",
|
||||
"game.catchBall();\n",
|
||||
"console.log(game.joueursEnVie);\n",
|
||||
"console.log(game.joueursMorts);\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "84e2ee1c-d8f5-4145-be1c-2e3775e483ef",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Définission premiere classe"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"id": "b1a24c1a-f1f0-434d-b2d4-a8ddcf668047",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"class Politicien {\n",
|
||||
"\n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"const politicien = new Politicien();"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "9b2393ec-6ddd-4747-b47b-2a714cb2b7b1",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Classe avec méthode simple"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 12,
|
||||
"id": "72649f7e-c5da-48d9-9e9a-846f084e9cf4",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"class JackOfAllTrade{\n",
|
||||
" add(a, b){\n",
|
||||
" return a + b;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" multiply(a, b){\n",
|
||||
" return a * b;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" add1(x){\n",
|
||||
" return this.add(x, 1);\n",
|
||||
" }\n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 13,
|
||||
"id": "a8c0005e-2fff-4f50-be35-4dd56bf669e2",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[33m199\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 13,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"let joat = new JackOfAllTrade()\n",
|
||||
"joat.add(109, 90)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 14,
|
||||
"id": "f9c756be-ca43-458a-993d-67652cd5986a",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[33m101\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 14,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"joat.add1(100)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 19,
|
||||
"id": "dda5b8a5-3f3d-40dc-9a02-ca38d970f2ec",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"hello_world foifoi\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 19,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"\n",
|
||||
"class ChangeCase{\n",
|
||||
" \n",
|
||||
" toSnake(str){\n",
|
||||
" str = str.replace(\" \", \"_\");\n",
|
||||
" return str;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
"}\n",
|
||||
"let case1 = new ChangeCase();\n",
|
||||
"case1.toSnake(\"hello world foifoi\");"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 1,
|
||||
"id": "29783c57-bcd6-4522-97d7-6fda3bde0d19",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let s = \"bonjour monde\""
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"id": "6fc63875-819c-4d09-b661-90bbdd273f2c",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let idx = s.indexOf(\" \")"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 3,
|
||||
"id": "22adb79c-4c67-45fd-929f-8be1ea3b1c83",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"bonjourmonde\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 3,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"s = s.replace(\" \", \"\")"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 5,
|
||||
"id": "a7bf2d08-6a65-44de-8091-095135b57908",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"M\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 5,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"s.substring(idx, idx + 1).toUpperCase()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 8,
|
||||
"id": "8f64482f-2d87-4f0a-b579-050c0bbe477a",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"import {Point} from \"https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@tp1.1/modules-examples/mod.js\""
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 10,
|
||||
"id": "00102d6b-2997-4fdb-a55f-ed812e1dade1",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let point = new Point(34, 78)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 11,
|
||||
"id": "9f79bbee-234f-4bd2-9689-77896c847bdd",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[33m34\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 11,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"point.getX()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 12,
|
||||
"id": "9ed8a8a9-303b-4e0b-bdb2-e69b2ea302f6",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[33m78\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 12,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"point.getY()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 13,
|
||||
"id": "a3ff4415-66bf-4b30-858f-90da7b352669",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"class Point2D{\n",
|
||||
" constructor(x, y){\n",
|
||||
" this.x = x;\n",
|
||||
" this.y = y;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" distanceFromOrigin(){\n",
|
||||
" return Math.sqrt(this.x * this.x + this.y * this.y);\n",
|
||||
" }\n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 15,
|
||||
"id": "19d175c5-8abd-44d0-8611-33cc543ef608",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[33m85.0881895447306\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 15,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"let point2D = new Point2D(34, 78)\n",
|
||||
"point2D.distanceFromOrigin()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 17,
|
||||
"id": "92669a40-4cea-49a2-b826-1bed8712324a",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"URL {\n",
|
||||
" href: \u001b[32m\"https://example.com/didier/rocks\"\u001b[39m,\n",
|
||||
" origin: \u001b[32m\"https://example.com\"\u001b[39m,\n",
|
||||
" protocol: \u001b[32m\"https:\"\u001b[39m,\n",
|
||||
" username: \u001b[32m\"\"\u001b[39m,\n",
|
||||
" password: \u001b[32m\"\"\u001b[39m,\n",
|
||||
" host: \u001b[32m\"example.com\"\u001b[39m,\n",
|
||||
" hostname: \u001b[32m\"example.com\"\u001b[39m,\n",
|
||||
" port: \u001b[32m\"\"\u001b[39m,\n",
|
||||
" pathname: \u001b[32m\"/didier/rocks\"\u001b[39m,\n",
|
||||
" hash: \u001b[32m\"\"\u001b[39m,\n",
|
||||
" search: \u001b[32m\"\"\u001b[39m\n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
"execution_count": 17,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"new URL(\"https://example.com/didier/rocks\")"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "e893b86f-148e-444b-b3dd-503a008c366b",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"kernelspec": {
|
||||
"display_name": "Deno",
|
||||
"language": "typescript",
|
||||
"name": "deno"
|
||||
},
|
||||
"language_info": {
|
||||
"file_extension": ".ts",
|
||||
"mimetype": "text/x.typescript",
|
||||
"name": "typescript",
|
||||
"nb_converter": "script",
|
||||
"pygments_lexer": "typescript",
|
||||
"version": "5.2.2"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 5
|
||||
}
|
||||
@@ -2,3 +2,6 @@
|
||||
|
||||
All the public classes can be accessed at `https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@latest/modules-examples/mod.js` and documentation is
|
||||
available at https://didiercrunch.github.io/cours-420-301-ah/.
|
||||
|
||||
|
||||
To purge cdn caches: https://www.jsdelivr.com/tools/purge
|
||||
+533
@@ -0,0 +1,533 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 15,
|
||||
"id": "6ea9db8b-018f-4766-a107-9ba7c20848f2",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let date = new Date()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 16,
|
||||
"id": "4aba8fd3-acb6-4473-b960-a5aa7f370320",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"Fri, 15 Dec 2023 23:27:35 GMT\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 16,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"date.toGMTString()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 17,
|
||||
"id": "9b50f1ad-46d3-44ef-9afe-d8be15772c4a",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[33m300\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 17,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"date.getTimezoneOffset()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 18,
|
||||
"id": "120697ff-9f7f-49fd-b3ef-c48e0fc6f758",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let url = new URL(\"http://example.com/notebooks/Untitled.ipynb\");"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 23,
|
||||
"id": "f0a4c569-b076-4441-aedc-60477fdaf4c2",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"google.com\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 23,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"url.hostname = \"google.com\""
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 24,
|
||||
"id": "c47ef44a-ae85-4654-8345-b8528ac7e253",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"http://google.com/notebooks/Untitled.ipynb\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 24,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"url.toString()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 25,
|
||||
"id": "26e99472-5c7c-44fd-99bf-d0db5ac89708",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let url2 = new URL(\"https://fr.wikipedia.org/wiki/Programmation_orient%C3%A9e_objet\");"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 26,
|
||||
"id": "de1aedbd-d21a-48d2-a258-df99847c4622",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"/wiki/Programmation_orient%C3%A9e_objet\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 26,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"url2.pathname"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 27,
|
||||
"id": "e01d4caf-de65-4638-8992-e94d36553953",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let person = {\n",
|
||||
" name: \"didier\"\n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 30,
|
||||
"id": "306cd832-963a-4a9e-9eaa-f6a4510b9ac2",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"function sayHello(){\n",
|
||||
" console.log(\"hello world\");\n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 43,
|
||||
"id": "ccdf4b55-c2f3-48ee-b821-d8e094c6e006",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"class Adder{\n",
|
||||
" value;\n",
|
||||
"\n",
|
||||
" constructor(value){\n",
|
||||
" this.value = value;\n",
|
||||
" }\n",
|
||||
" \n",
|
||||
"\n",
|
||||
" add(a){\n",
|
||||
" return a + this.value;\n",
|
||||
" }\n",
|
||||
" \n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 44,
|
||||
"id": "0fcbba8c-f16e-4272-96bf-94de14e3388a",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"\u001b[33m125\u001b[39m\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"toto = new Adder(100)\n",
|
||||
"console.log(toto.add(25))"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 45,
|
||||
"id": "5a248f9d-893b-49d0-9806-cf281e6ee63f",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"ename": "ReferenceError",
|
||||
"evalue": "Person is not defined",
|
||||
"output_type": "error",
|
||||
"traceback": [
|
||||
"Stack trace:",
|
||||
"ReferenceError: Person is not defined",
|
||||
" at <anonymous>:1:35"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"let person = new Person(\"steve\", \"boutin\", 1975, \"burundi\");"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 47,
|
||||
"id": "b0fd3f3d-cbf3-44e2-9ff7-fab252746cc1",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"ename": "TypeError",
|
||||
"evalue": "person.isMajor is not a function",
|
||||
"output_type": "error",
|
||||
"traceback": [
|
||||
"Stack trace:",
|
||||
"TypeError: person.isMajor is not a function",
|
||||
" at <anonymous>:1:33"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"if(person.isMajor()){}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 51,
|
||||
"id": "cbb202ee-fa5b-4955-a686-c23397ee45ce",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"import {HockeyGame} from \"https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@006.3/modules-examples/mod.js\";\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 64,
|
||||
"id": "5f9a1f61-9e4e-4747-9297-1cf9c02c8918",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let game1 = new HockeyGame();\n",
|
||||
"let game2 = new HockeyGame();\n",
|
||||
"let game3 = new HockeyGame();\n",
|
||||
"\n",
|
||||
"function printScore(game){\n",
|
||||
" console.log(`Home ${game.home} - Away ${game.away}`)\n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"function printScores(game1, game2, game3){\n",
|
||||
" console.log(`Game 1: Home ${game1.home} - Away ${game1.away}`);\n",
|
||||
" console.log(`Game 2: Home ${game2.home} - Away ${game2.away}`);\n",
|
||||
" console.log(`Game 3: Home ${game3.home} - Away ${game3.away}`);\n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 65,
|
||||
"id": "628f8ad5-f8eb-48f9-bc80-cb2db3fd9de7",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"game1.homeTeamScores()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 66,
|
||||
"id": "44ab673f-7d0b-4095-a1f5-e8cbe35fbb31",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Game 1: Home 1 - Away 0\n",
|
||||
"Game 2: Home 0 - Away 0\n",
|
||||
"Game 3: Home 0 - Away 0\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"printScores(game1, game2, game3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 67,
|
||||
"id": "734050a1-f28d-44a3-8077-39df1295e1fa",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"game3.awayTeamScores()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 68,
|
||||
"id": "13d32e62-091e-4706-9d62-c582211e9408",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"Game 1: Home 1 - Away 0\n",
|
||||
"Game 2: Home 0 - Away 0\n",
|
||||
"Game 3: Home 0 - Away 1\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"printScores(game1, game2, game3)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 69,
|
||||
"id": "c27e6ab3-b4f3-46b8-b6f6-ce87883a45dc",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"import {HockeyPlayer} from \"https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@006.1/modules-examples/mod.js\";\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 70,
|
||||
"id": "6f131f34-8d45-4d82-a9a5-5dbfdd99d4a8",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"let dateOfBirth = new Date(1983, 9, 9);\n",
|
||||
"let player = new HockeyPlayer(\"didier\", \"amyot\", dateOfBirth)\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 73,
|
||||
"id": "ab87ba0a-26e8-448e-a953-9fe4546dd9b8",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"Sun, 09 Oct 1983 04:00:00 GMT\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 73,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"dateOfBirth.toUTCString()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 75,
|
||||
"id": "7e50ce6e-90e8-42ee-90e2-ef5c882d84f1",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[35m1983-10-09T04:00:00.000Z\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 75,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"new Date(\"Sun, 09 Oct 1983 04:00:00 GMT\")"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 77,
|
||||
"id": "4acfd4c6-a432-4b3d-a05a-69f4bdc6c8ff",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"\u001b[32m\"1983-10-09T04:00:00.000Z\"\u001b[39m"
|
||||
]
|
||||
},
|
||||
"execution_count": 77,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"dateOfBirth.toISOString()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"id": "908117c5-d6e1-4c0c-9c1f-a5b9e4b44f11",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"\u001b[33m62\u001b[39m\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"\n",
|
||||
"import {HockeyPlayer, HockeyPlayerStatistics} \n",
|
||||
" from \"https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@006.3/modules-examples/mod.js\";\n",
|
||||
"\n",
|
||||
"let wayneGretzky = new HockeyPlayer(\"Wayne\", \n",
|
||||
" \"Gretzky\", \n",
|
||||
" new Date(1961, 0, 26));\n",
|
||||
"\n",
|
||||
"let wayneGretzkyStats = new HockeyPlayerStatistics(\"Wayne\", \n",
|
||||
" \"Gretzky\", \n",
|
||||
" new Date(1961, 0, 26));\n",
|
||||
"\n",
|
||||
"console.log(wayneGretzky.currentAge());"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "b05528d2-2c8e-4e91-afff-bb50d0bc6fd8",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "2afca106-0957-4dfb-832c-31a12695704a",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "995a3e03-fa7b-48fb-a1bf-28e0eddb7d34",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "457c74d2-138d-42c4-8d60-454a10a266c3",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "c9d0aa08-3bc0-44e0-a1e4-030a6c620b5a",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "b24755d6-4405-46c5-ba57-2f4231541446",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "3c0691b1-6406-460d-ac8c-c23d4b29b72a",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "36abe78f-c35d-4d1c-b569-32aba406199c",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"kernelspec": {
|
||||
"display_name": "Deno",
|
||||
"language": "typescript",
|
||||
"name": "deno"
|
||||
},
|
||||
"language_info": {
|
||||
"file_extension": ".ts",
|
||||
"mimetype": "text/x.typescript",
|
||||
"name": "typescript",
|
||||
"nb_converter": "script",
|
||||
"pygments_lexer": "typescript",
|
||||
"version": "5.2.2"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 5
|
||||
}
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": null,
|
||||
"id": "d9c5a324-3d7b-4f97-a7af-642e23087307",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": []
|
||||
}
|
||||
],
|
||||
"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.11.6"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 5
|
||||
}
|
||||
@@ -0,0 +1,100 @@
|
||||
const mock_input: string = `...#......
|
||||
.......#..
|
||||
#.........
|
||||
..........
|
||||
......#...
|
||||
.#........
|
||||
.........#
|
||||
..........
|
||||
.......#..
|
||||
#...#.....`;
|
||||
|
||||
|
||||
function replaceGalaxiesWithNumber(input: string): [string, number]{
|
||||
let i = 0;
|
||||
while(input.indexOf("#") !== -1){
|
||||
input = input.replace("#", i);
|
||||
i ++;
|
||||
}
|
||||
return [input, i];
|
||||
}
|
||||
|
||||
function findEmptyRows(input: string): number[]{
|
||||
let ret = [];
|
||||
let i = 0;
|
||||
for(const row of input.split("\n")){
|
||||
if(row.match(/\d/g) === null ){
|
||||
ret.push(i);
|
||||
}
|
||||
i++;
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function extractCol(input: string, idx: number): string{
|
||||
let ret = "";
|
||||
const rowLength = input.indexOf("\n") + 1;
|
||||
for(let i = idx; i < input.length; i += rowLength){
|
||||
ret += input.charAt(i)
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function findEmptyColumns(input: string): number[]{
|
||||
const numberOfCols = input.indexOf("\n");
|
||||
const ret: number[] = [];
|
||||
for(let i = 0; i < numberOfCols - 1; i ++){
|
||||
if(extractCol(input, i).match(/\d/g) === null){
|
||||
ret.push(i);
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getGalaxyCoordinates(universe: string, galaxy: number): [number, number]{
|
||||
const dist = universe.indexOf(galaxy.toString());
|
||||
const numberOfCols = universe.indexOf("\n") + 1;
|
||||
return [dist % numberOfCols, Math.floor(dist / numberOfCols)]
|
||||
}
|
||||
|
||||
function isBetween(x: number, minOrMax1: number, minOrMax2: number): boolean{
|
||||
if(minOrMax1 == minOrMax2){
|
||||
return false;
|
||||
}
|
||||
if(minOrMax1 > minOrMax2){
|
||||
return isBetween(x, minOrMax2, minOrMax1);
|
||||
}
|
||||
const min_ = minOrMax1;
|
||||
const max_ = minOrMax2;
|
||||
return min_ < x && x < max_;
|
||||
}
|
||||
|
||||
function distanceBetweenGalaxies(universe: string,
|
||||
galaxy1: number,
|
||||
galaxy2: number,
|
||||
expandedRows: number[],
|
||||
expandedColumns: number[]){
|
||||
const [g1x, g1y] = getGalaxyCoordinates(universe, galaxy1);
|
||||
const [g2x, g2y] = getGalaxyCoordinates(universe, galaxy2);
|
||||
expandedRows.filter(x => isBetween(x, g1x, g2x)).length
|
||||
return Math.abs(g1x - g2x)
|
||||
+ Math.abs(g1y - g2y)
|
||||
+ expandedRows.filter(x => isBetween(x, g1x, g2x)).length
|
||||
+ expandedColumns.filter(x => isBetween(x, g1y, g2y)).length
|
||||
}
|
||||
|
||||
const [universe, nbrGalaxies] = replaceGalaxiesWithNumber(mock_input)
|
||||
console.log(universe)
|
||||
console.log("ho lala")
|
||||
|
||||
const expandedRows = findEmptyRows(universe);
|
||||
const expandedColumns = findEmptyColumns(universe);
|
||||
console.log(expandedColumns)
|
||||
console.log(expandedRows)
|
||||
// console.log(distanceBetweenGalaxies(universe, 4, 8, expandedRows, expandedColumns));
|
||||
// console.log(distanceBetweenGalaxies(universe, 0, 6, expandedRows, expandedColumns));
|
||||
console.log(distanceBetweenGalaxies(universe, 2, 5, expandedRows, expandedColumns));
|
||||
// console.log(distanceBetweenGalaxies(universe, 7, 8, expandedRows, expandedColumns));
|
||||
|
||||
|
||||
console.log("fenni")
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script type="module" src="main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,66 @@
|
||||
class CaseUtil{
|
||||
|
||||
constructor() {
|
||||
}
|
||||
toSnakeCase(s){
|
||||
return s.replaceAll(" ", "_");
|
||||
}
|
||||
|
||||
toKebabCase(s){
|
||||
return s.replaceAll(" ", "-");
|
||||
}
|
||||
|
||||
toCamelCase(s){
|
||||
while(s.indexOf(" ") !== -1){
|
||||
const idx = s.indexOf(" ");
|
||||
s = s.replace(" ", "");
|
||||
const capital = s.substring(idx, idx + 1).toUpperCase();
|
||||
s = s.substring(0, idx) + capital + s.substring(idx + 1, s.length);
|
||||
}
|
||||
return s;
|
||||
}
|
||||
|
||||
// bonjour le monde --> bonjouRlEmondE
|
||||
toAlexandreCase(s){
|
||||
const ret = [];
|
||||
for(const word of s.split(" ")){
|
||||
const lastLetterCapitalized = word.substring(word.length - 1, word.length).toUpperCase();
|
||||
const wordWithLastLetterCapitalized = word.substring(0, word.length - 1) + lastLetterCapitalized;
|
||||
ret.push(wordWithLastLetterCapitalized)
|
||||
}
|
||||
return ret.join("");
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
class CaseWord{
|
||||
constructor(underlyingText) {
|
||||
this.underlyingText = underlyingText;
|
||||
}
|
||||
|
||||
kebebCase(){
|
||||
const caseUtil = new CaseUtil();
|
||||
return caseUtil.toKebabCase(this.underlyingText);
|
||||
}
|
||||
|
||||
snakeCase(){
|
||||
const caseUtil = new CaseUtil();
|
||||
return caseUtil.toSnakeCase(this.underlyingText);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
const wasim = new CaseWord("wasim est cool");
|
||||
const rachid = new CaseWord("rachid est cool");
|
||||
alert(wasim.kebebCase()); // wasim-est-cool
|
||||
alert(rachid.snakeCase()); // rachid_est_cool
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Hello world</h1>
|
||||
<label>quelle couleur? <input type="color"> </label>
|
||||
</body>
|
||||
</html>
|
||||
+1898
File diff suppressed because it is too large.
Load diff
@@ -0,0 +1,19 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ul>
|
||||
<li id="un">un</li>
|
||||
<li id="deux">deux</li>
|
||||
<li id="trois">trois</li>
|
||||
</ul>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,31 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<script type="module" src="index.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<input type="text" id="input-1" />
|
||||
<div>
|
||||
<button id="button-1">button-1</button>
|
||||
</div>
|
||||
<div>
|
||||
<button id="button-2">button-2</button>
|
||||
</div>
|
||||
<div>
|
||||
<button id="button-3">button-3</button>
|
||||
</div>
|
||||
<div>
|
||||
<button id="button-4">button-4</button>
|
||||
</div>
|
||||
|
||||
<pre id="output-1"></pre>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
import {isValidIsbn, isValidIsbn10, isValidIsbn13} from "https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@latest/modules-examples/books.js";
|
||||
import {isBalanced} from "./util.js";
|
||||
|
||||
function question1(){
|
||||
let input1 = document.getElementById("input-1")
|
||||
let inputText = input1.value;
|
||||
document.getElementById("output-1").innerText = inputText;
|
||||
}
|
||||
|
||||
function question4(){
|
||||
let input1 = document.getElementById("input-1")
|
||||
let inputText = input1.value;
|
||||
if(isValidIsbn(inputText)){
|
||||
document.getElementById("output-1").innerText = "Isbn est valide";
|
||||
} else {
|
||||
document.getElementById("output-1").innerText = "Isbn n'est pas valide";
|
||||
}
|
||||
}
|
||||
|
||||
function getQuestion5Message(text){
|
||||
if(isValidIsbn13(text)){
|
||||
return "Ceci est un isbn-13 valide";
|
||||
}
|
||||
if(isValidIsbn10(text)){
|
||||
return "Ceci est un isbn-10 valide";
|
||||
}
|
||||
return "Ceci n'est pas un isbn";
|
||||
}
|
||||
|
||||
function question5(){
|
||||
let input1 = document.getElementById("input-1")
|
||||
let inputText = input1.value;
|
||||
document.getElementById("output-1").innerText = getQuestion5Message(inputText);
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getQuestion6Message(text){
|
||||
if(isBalanced(text)){
|
||||
return "Les parantheses sont balancées";
|
||||
}
|
||||
return "Les parantheses ne sont pas balancées";
|
||||
}
|
||||
|
||||
function question6(){
|
||||
let input1 = document.getElementById("input-1")
|
||||
let inputText = input1.value;
|
||||
document.getElementById("output-1").innerText = getQuestion6Message(inputText);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
document.getElementById("button-1")
|
||||
.addEventListener("click", question1);
|
||||
|
||||
document.getElementById("button-2")
|
||||
.addEventListener("click", question4);
|
||||
|
||||
document.getElementById("button-3")
|
||||
.addEventListener("click", question5);
|
||||
|
||||
document.getElementById("button-4")
|
||||
.addEventListener("click", question6);
|
||||
@@ -0,0 +1,15 @@
|
||||
export function isBalanced(str){
|
||||
let counter = 0;
|
||||
for(const letter of str){
|
||||
if(letter === "("){
|
||||
counter += 1;
|
||||
}
|
||||
if(letter === ")"){
|
||||
counter -= 1;
|
||||
}
|
||||
if(counter < 0){
|
||||
return false;
|
||||
}
|
||||
}
|
||||
return counter === 0;
|
||||
}
|
||||
+61
@@ -0,0 +1,61 @@
|
||||
|
||||
function question1(){
|
||||
let date = new Date()
|
||||
console.log(date.toLocaleString())
|
||||
console.log(date.toLocaleTimeString());
|
||||
}
|
||||
|
||||
function getMonthName(monthIndex){
|
||||
const months = ["janvier", "fevrier", "mars", "avril", "mai", "juin", "juillet", "aout", "sept", "oct", "nov", "dec"];
|
||||
return months[monthIndex];
|
||||
}
|
||||
|
||||
function question2(){
|
||||
let date = new Date()
|
||||
let zeroIndexedMonth = date.getMonth();
|
||||
console.log(getMonthName(zeroIndexedMonth))
|
||||
}
|
||||
|
||||
function question3(){
|
||||
let date = new Date();
|
||||
console.log(date.getFullYear())
|
||||
}
|
||||
|
||||
function question4(){
|
||||
let date = new Date();
|
||||
console.log(date.getTime())
|
||||
}
|
||||
|
||||
|
||||
function question5(){
|
||||
let date = new Date();
|
||||
console.log(date.getMinutes())
|
||||
}
|
||||
|
||||
|
||||
function question6(){
|
||||
let date = new Date();
|
||||
console.log(date.getTimezoneOffset() / 60)
|
||||
}
|
||||
|
||||
function question7(){
|
||||
let date = new Date();
|
||||
date.setFullYear(date.getFullYear() + 1);
|
||||
console.log(date.getTime())
|
||||
}
|
||||
|
||||
function question8(){
|
||||
let date = new Date();
|
||||
date.setMonth(date.getMonth() - 1);
|
||||
console.log(date.toString())
|
||||
}
|
||||
|
||||
|
||||
question1();
|
||||
question2();
|
||||
question3();
|
||||
question4();
|
||||
question5();
|
||||
question6();
|
||||
question7();
|
||||
question8();
|
||||
@@ -0,0 +1,13 @@
|
||||
import {HockeyGame} from "https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@006.1/modules-examples/mod.js";
|
||||
|
||||
let game1 = new HockeyGame();
|
||||
let game2 = new HockeyGame();
|
||||
game1.awayTeamScores();
|
||||
game1.homeTeamScores();
|
||||
game2.homeTeamScores()
|
||||
game1.homeTeamScores();
|
||||
game1.awayTeamScores();
|
||||
game2.homeTeamScores()
|
||||
game1.homeTeamScores();
|
||||
console.log(`Le gagnant de la partie 1 est: ${game1.winner()}`)
|
||||
console.log(`Le gagnant de la partie 2 est: ${game2.winner()}`)
|
||||
@@ -0,0 +1,220 @@
|
||||
{
|
||||
"cells": [
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 2,
|
||||
"id": "979a911a",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"class Human {\n",
|
||||
"\n",
|
||||
" constructor(name, age){\n",
|
||||
" this.name = name;\n",
|
||||
" this.age = age;\n",
|
||||
" }\n",
|
||||
" \n",
|
||||
" toJSON(){\n",
|
||||
" return {\n",
|
||||
" type: \"Human\",\n",
|
||||
" age: this.age,\n",
|
||||
" name: this.name,\n",
|
||||
" }\n",
|
||||
" }\n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"class Gnome{\n",
|
||||
" constructor(name, height){\n",
|
||||
" this.name = name;\n",
|
||||
" this.height = height;\n",
|
||||
" }\n",
|
||||
"\n",
|
||||
" toJSON(){\n",
|
||||
" return {\n",
|
||||
" type: \"Gnome\",\n",
|
||||
" name: this.name,\n",
|
||||
" height: this.height,\n",
|
||||
" }\n",
|
||||
" }\n",
|
||||
"}\n"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "3ec0891a-3c4d-41b0-99d2-80260344274e",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Objectif, sérialiser une liste de gnome ou d'human"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 6,
|
||||
"id": "84f50c8f-5f0a-42fc-ac45-36ddba69d18c",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"const persons = [\n",
|
||||
" new Human(\"Boutros\", 89),\n",
|
||||
" new Human(\"Fares\", 12),\n",
|
||||
" new Gnome(\"Petit Pied\", 102),\n",
|
||||
" new Gnome(\"Grand Gaillard\", 135),\n",
|
||||
"]\n",
|
||||
"\n",
|
||||
"\n",
|
||||
"function serializePersons(persons){\n",
|
||||
" const personObjets = persons.map(person => person.toJSON())\n",
|
||||
" localStorage.setItem(\"persons.json\", JSON.stringify(personObjets));\n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"serializePersons(persons)"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "2b05a60d-974c-4e91-b9fb-c17e042445cd",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Le statue de local storage est donc..."
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 7,
|
||||
"id": "4c46686d-9099-48f0-bcd0-1703eb385ade",
|
||||
"metadata": {
|
||||
"scrolled": true
|
||||
},
|
||||
"outputs": [
|
||||
{
|
||||
"name": "stdout",
|
||||
"output_type": "stream",
|
||||
"text": [
|
||||
"[{\"type\":\"Human\",\"age\":89,\"name\":\"Boutros\"},{\"type\":\"Human\",\"age\":12,\"name\":\"Fares\"},{\"type\":\"Gnome\",\"name\":\"Petit Pied\",\"height\":102},{\"type\":\"Gnome\",\"name\":\"Grand Gaillard\",\"height\":135}]\n"
|
||||
]
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"console.log(localStorage.getItem(\"persons.json\"))"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "dd8acf55-c0f6-4638-905e-12e8c80c8bbd",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Plus bas, il s'agit de la logique pour deserialiser les personnes"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 22,
|
||||
"id": "ef98a65f-8156-4f27-943c-d17b63111838",
|
||||
"metadata": {},
|
||||
"outputs": [],
|
||||
"source": [
|
||||
"function deserializeHumanObject(humanObject){\n",
|
||||
" return new Human(humanObject.name, humanObject.age)\n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"function deserializeGnomeObject(gnomeObject){\n",
|
||||
" return new Gnome(gnomeObject.name, gnomeObject.height)\n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"function deserializePersonObject(person){\n",
|
||||
" if(person.type === \"Human\"){\n",
|
||||
" return deserializeHumanObject(person);\n",
|
||||
" }\n",
|
||||
" if(person.type === \"Gnome\"){\n",
|
||||
" return deserializeGnomeObject(person);\n",
|
||||
" }\n",
|
||||
"}\n",
|
||||
"\n",
|
||||
"\n",
|
||||
"function deserializePersons(){\n",
|
||||
" const personObjects = JSON.parse(localStorage.getItem(\"persons.json\"));\n",
|
||||
" if(!personObjects){\n",
|
||||
" return []; // le cas ou il n'y a rien de sauvegarder dans \"persons.json\"\n",
|
||||
" }\n",
|
||||
" return personObjects.map(deserializePersonObject)\n",
|
||||
"}"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "b325ab23-811f-489e-a974-13f64a1ce9e0",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"### Plus bas, voici comment deserialiser toutes les personnes du localstorage"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 20,
|
||||
"id": "690b3db8-ad1d-433b-82dc-58afe4c97927",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"[]"
|
||||
]
|
||||
},
|
||||
"execution_count": 20,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"deserializePersons()"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "markdown",
|
||||
"id": "6ca1e818-7bf9-4641-a219-db4a4ae56b79",
|
||||
"metadata": {},
|
||||
"source": [
|
||||
"Cas special: deserializer un constenue de localstorage vide"
|
||||
]
|
||||
},
|
||||
{
|
||||
"cell_type": "code",
|
||||
"execution_count": 21,
|
||||
"id": "4fcdaa7e-0d7c-4bbb-8a70-ffb6586387fd",
|
||||
"metadata": {},
|
||||
"outputs": [
|
||||
{
|
||||
"data": {
|
||||
"text/plain": [
|
||||
"[]"
|
||||
]
|
||||
},
|
||||
"execution_count": 21,
|
||||
"metadata": {},
|
||||
"output_type": "execute_result"
|
||||
}
|
||||
],
|
||||
"source": [
|
||||
"localStorage.clear() // efface tout du localstorage. Le cas du premier visiteur\n",
|
||||
"deserializePersons()"
|
||||
]
|
||||
}
|
||||
],
|
||||
"metadata": {
|
||||
"kernelspec": {
|
||||
"display_name": "Deno",
|
||||
"language": "typescript",
|
||||
"name": "deno"
|
||||
},
|
||||
"language_info": {
|
||||
"file_extension": ".ts",
|
||||
"mimetype": "text/x.typescript",
|
||||
"name": "typescript",
|
||||
"nb_converter": "script",
|
||||
"pygments_lexer": "typescript",
|
||||
"version": "5.3.3"
|
||||
}
|
||||
},
|
||||
"nbformat": 4,
|
||||
"nbformat_minor": 5
|
||||
}
|
||||
@@ -0,0 +1,23 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
<script type="module" src="main.js"></script>
|
||||
<link rel="stylesheet" href="style.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="example-1"></div>
|
||||
|
||||
<div id="example-2"></div>
|
||||
|
||||
<div id="example-3"></div>
|
||||
|
||||
<div id="example-4"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,49 @@
|
||||
import m from "https://esm.sh/mithril@2.2.2";
|
||||
|
||||
function example1(){
|
||||
let div1 = m("b", {style: "font-family: monospace;"}, "didier");
|
||||
let div2 = m("div", "bonjour monde");
|
||||
|
||||
return m("div", {style: "color:red;"}, "bonjour", " ", div1);
|
||||
}
|
||||
|
||||
m.render(document.getElementById("example-1"), example1());
|
||||
|
||||
|
||||
function example2(){
|
||||
let chien = m("li", "un chien");
|
||||
let chat = m("li", ["un ", m("a", {href: "https://example.com/chat"}, "chat")]);
|
||||
return m("ul", [chien, chat]);
|
||||
}
|
||||
|
||||
m.render(document.getElementById("example-2"), example2());
|
||||
|
||||
|
||||
function example3(){
|
||||
let rougeEtGros = m("div.red.big", "Rouge & Gros");
|
||||
let blueEtPetit = m("div.blue.small", "Bleu & Petit");
|
||||
return m("div", [rougeEtGros, blueEtPetit]);
|
||||
}
|
||||
|
||||
m.render(document.getElementById("example-3"), example3());
|
||||
|
||||
function exemple4(){
|
||||
const subList = m("ol",
|
||||
m("li", "unos"),
|
||||
m("li", "dos"),
|
||||
m("li", "tres"));
|
||||
const lst = m("ul",
|
||||
m("li", "un"),
|
||||
m("li", "deux"),
|
||||
m("li", subList));
|
||||
|
||||
const form = m("form",
|
||||
m("label", "X: ", m("input", {type: "text"})),
|
||||
m("label", "Y: ", m("input", {type: "text"})),
|
||||
m("button", "envoyer!")
|
||||
);
|
||||
return m("div", lst, form);
|
||||
}
|
||||
|
||||
const root = document.getElementById("example-4")
|
||||
m.render(root, exemple4());
|
||||
@@ -0,0 +1,15 @@
|
||||
.blue{
|
||||
color: blue;
|
||||
}
|
||||
|
||||
.red{
|
||||
color: red;
|
||||
}
|
||||
|
||||
.big{
|
||||
font-size: 1.8em;
|
||||
}
|
||||
|
||||
.small{
|
||||
font-size: 0.7em;
|
||||
}
|
||||
@@ -99,3 +99,113 @@ export class HockeyPlayer{
|
||||
return Math.floor((now - this.dateOfBirth.getTime()) / numberOfMillisecondsPerYear);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Class representing a simple hockey player with some statistics attached to it.
|
||||
*/
|
||||
export class HockeyPlayerStatistics {
|
||||
/**
|
||||
* the fist name of the player.
|
||||
*/
|
||||
firstName = ""
|
||||
/**
|
||||
* the last name of the player.
|
||||
*/
|
||||
lastName = ""
|
||||
|
||||
/**
|
||||
* the date of birth of the player.
|
||||
*/
|
||||
dateOfBirth = null;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {String} firstName the first name of the player
|
||||
* @param {String} lastName the last name of the player
|
||||
* @param {Date} dateOfBirth the birth date of the player
|
||||
*/
|
||||
constructor(firstName, lastName, dateOfBirth){
|
||||
this.firstName = firstName;
|
||||
this.lastName = lastName;
|
||||
this.dateOfBirth = dateOfBirth;
|
||||
}
|
||||
|
||||
/**
|
||||
* Returns the current age of the player in years.
|
||||
*/
|
||||
currentAge(){
|
||||
return new HockeyPlayer(this.firstName, this.lastName, this.dateOfBirth).currentAge();
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set the total number the player has played
|
||||
* @param {number} numberOfPlayedGames
|
||||
*/
|
||||
setNumberOfPlayedGames(numberOfPlayedGames){
|
||||
this.numberOfPlayedGames = numberOfPlayedGames;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the total number the player has played in playoff
|
||||
* @param {number} numberOfPlayedPlayoffGames
|
||||
*/
|
||||
setNumberOfPlayedPlayoffGames(numberOfPlayedPlayoffGames){
|
||||
this.numberOfPlayedPlayoffGames = numberOfPlayedPlayoffGames;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set the total number the points the player has scored during playoff games.
|
||||
* @param {number} numberOfPointsDuringPlayoffGames
|
||||
*/
|
||||
setNumberOfPointsDuringPlayoffGames(numberOfPointsDuringPlayoffGames){
|
||||
this.numberOfPointsDuringPlayoffGames = numberOfPointsDuringPlayoffGames;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set the total number the player has played
|
||||
* @param {number} numberOfPoints
|
||||
*/
|
||||
setNumberOfPoints(numberOfPoints){
|
||||
this.numberOfPoints = numberOfPoints;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Set the total number of goal scored by the player
|
||||
* @param {number} goals
|
||||
*/
|
||||
setNumberOfGoals(numberOfGoals){
|
||||
this.numberOfGoals = numberOfGoals
|
||||
}
|
||||
|
||||
/**
|
||||
* the number of points scored by game. This method requires
|
||||
* the knowledge of numberOfPoints and numberOfPlayedGames to
|
||||
* return a meaningful result.
|
||||
*/
|
||||
get pointsPerGame(){
|
||||
return this.numberOfPoints / this.numberOfPlayedGames;
|
||||
}
|
||||
|
||||
/**
|
||||
* the number of points scored by playoff game. This method requires
|
||||
* the knowledge of numberOfPointsDuringPlayoffGames and
|
||||
* numberOfPlayedPlayoffGames to return a meaningful result.
|
||||
*/
|
||||
get pointsPerPlayoffGame(){
|
||||
return this.numberOfPointsDuringPlayoffGames / this.numberOfPlayedPlayoffGames;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* the number of goals scored by game. This method requires
|
||||
* the knowledge of numberOfGoals and numberOfPlayedGames to
|
||||
* return a meaningful result.
|
||||
*/
|
||||
get goalByPlayedGame(){
|
||||
return this.numberOfGoals / this.numberOfPlayedGames;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,3 +1,4 @@
|
||||
export * from "./hockey.js"
|
||||
export * from "./books.js"
|
||||
export * from "./stats.js"
|
||||
export * from "./stats.js"
|
||||
export * from "./tp1.js"
|
||||
@@ -0,0 +1,216 @@
|
||||
import m from "https://esm.sh/mithril@2.2.2"
|
||||
|
||||
const BLACK = "000000";
|
||||
/**
|
||||
* Classe qui représente un point sur
|
||||
* un plan cartésien. Le point est donc
|
||||
* représenté par deux coordonnées x et y.
|
||||
*/
|
||||
export class Point{
|
||||
#x;
|
||||
#y;
|
||||
constructor(x, y) {
|
||||
this.#x = x;
|
||||
this.#y = y;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retoure la coordonée X du point.
|
||||
* @returns {number}
|
||||
*/
|
||||
getX(){
|
||||
return this.#x;
|
||||
}
|
||||
|
||||
/**
|
||||
* Retoure la coordonée Y du point.
|
||||
* @returns {number}
|
||||
*/
|
||||
getY(){
|
||||
return this.#y;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Classe qui représente un cercle. Le cercle est
|
||||
* définit par un Point et un rayon.
|
||||
*
|
||||
* Par défaut, le cercle est noir. Mais le cercle peut
|
||||
* changer de couleur.
|
||||
*/
|
||||
export class Circle{
|
||||
#center;
|
||||
#radius;
|
||||
#color;
|
||||
#id;
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {Point} center le point au centre du cercle
|
||||
* @param {number} radius le rayon du cercle
|
||||
* @param {number} id l'id unique du cercle. C'est au
|
||||
* créateur de l'instance de s'assurer de l'unicité
|
||||
* de l'id.
|
||||
*/
|
||||
constructor(center, radius, id) {
|
||||
this.#center = center;
|
||||
this.#radius = radius;
|
||||
this.#color = BLACK;
|
||||
this.#id = id;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {Point} le point au centre au cercle
|
||||
*/
|
||||
getCenter(){
|
||||
return this.#center;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {number} le rayon du cercle
|
||||
*/
|
||||
getRadius(){
|
||||
return this.#radius;
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @returns {string} la couleur (hexadécimal) du cercle
|
||||
*/
|
||||
getColor(){
|
||||
return this.#color;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {String} color la nouvelle couleur du cercle
|
||||
*/
|
||||
setColor(color){
|
||||
this.#color = color;
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Point} center, le nouveau centre du cercle.
|
||||
*/
|
||||
setCenter(center){
|
||||
this.#center = center;
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {number} l'id du cercle
|
||||
*/
|
||||
getId(){
|
||||
return this.#id;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Dessine tous les cercles dans un svg. Cette fonction
|
||||
* nettoye le svg avant d'ajouter les cercles.
|
||||
*
|
||||
* @param node {HTMLElement} un element svg
|
||||
* @param circles {Circle[]} Les cercles à dessiner
|
||||
*/
|
||||
export function drawCircles(node, circles){
|
||||
let svgCircles = [];
|
||||
for(const circle of circles){
|
||||
const attr = {
|
||||
cx: circle.getCenter().getX(),
|
||||
cy: circle.getCenter().getY(),
|
||||
r: circle.getRadius(),
|
||||
fill: `#${circle.getColor()}`,
|
||||
|
||||
};
|
||||
svgCircles.push(m("circle", attr))
|
||||
}
|
||||
m.render(node, svgCircles);
|
||||
}
|
||||
|
||||
function identity(x){
|
||||
return x;
|
||||
}
|
||||
|
||||
function functionOrDefault(fn){
|
||||
if(typeof fn === 'function'){
|
||||
return fn;
|
||||
}
|
||||
return identity;
|
||||
}
|
||||
|
||||
function drawIcons(circle,
|
||||
onClickUp,
|
||||
onClickDown,
|
||||
onClickLeft,
|
||||
onClickRight,
|
||||
onClickPaint){
|
||||
return [
|
||||
m("i.fa-solid.fa-arrow-up.is-clickable", {onclick: () => onClickUp(circle.getId())}),
|
||||
m("i.fa-solid.fa-arrow-down.is-clickable", {onclick: () => onClickDown(circle.getId())}),
|
||||
m("i.fa-solid.fa-arrow-left.is-clickable", {onclick: () => onClickLeft(circle.getId())}),
|
||||
m("i.fa-solid.fa-arrow-right.is-clickable", {onclick: () => onClickRight(circle.getId())}),
|
||||
m("i.fa-solid.fa-paint-roller.is-clickable", {onclick: () => onClickPaint(circle.getId())}),
|
||||
]
|
||||
}
|
||||
|
||||
/**
|
||||
* @param node {HTMLElement} un element tbody
|
||||
* @param circles {Circle[]} Les cercles
|
||||
* @param pointToString Argument optionnel qui doit être une fonction
|
||||
* qui prend en paramêtre un Point et retourne un String qui
|
||||
* représente le point.
|
||||
* @param onClickUp Argument optionnel qui doit être une fonction
|
||||
* qui sera appelée lorsque la flèche pointant vers le haut
|
||||
* sera cliquée. L'id du cercle sera passé en argument de
|
||||
* la fonction.
|
||||
* @param onClickDown Argument optionnel qui doit être une fonction
|
||||
* qui sera appelée lorsque la flèche pointant vers le bas
|
||||
* sera cliquée. L'id du cercle sera passé en argument de
|
||||
* la fonction.
|
||||
* @param onClickLeft Argument optionnel qui doit être une fonction
|
||||
* qui sera appelée lorsque la flèche pointant vers la gauche
|
||||
* sera cliquée. L'id du cercle sera passé en argument de
|
||||
* la fonction.
|
||||
* @param onClickRight Argument optionnel qui doit être une fonction
|
||||
* qui sera appelée lorsque la flèche pointant vers la droite
|
||||
* sera cliquée. L'id du cercle sera passé en argument de
|
||||
* la fonction.
|
||||
* @param onClickPaint Argument optionnel qui doit être une fonction
|
||||
* qui sera appelée lorsque l'icone peinture
|
||||
* sera cliquée. L'id du cercle sera passé en argument de
|
||||
* la fonction.
|
||||
*/
|
||||
export function populateTable(node,
|
||||
circles,
|
||||
pointToString= undefined,
|
||||
onClickUp=undefined,
|
||||
onClickDown=undefined,
|
||||
onClickLeft=undefined,
|
||||
onClickRight=undefined,
|
||||
onClickPaint=undefined){
|
||||
const rows = [];
|
||||
pointToString = functionOrDefault(pointToString)
|
||||
for(const circle of circles){
|
||||
const row =[m("td", circle.getId()),
|
||||
m("td", pointToString(circle.getCenter())),
|
||||
m("td", circle.getRadius()),
|
||||
m("td", drawIcons(circle,
|
||||
functionOrDefault(onClickUp),
|
||||
functionOrDefault(onClickDown),
|
||||
functionOrDefault(onClickLeft),
|
||||
functionOrDefault(onClickRight),
|
||||
functionOrDefault(onClickPaint)))];
|
||||
rows.push(m("tr", row))
|
||||
}
|
||||
m.render(node, rows);
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Retourne une couleur de gris aléatoire à partir d'un nombre entier.
|
||||
* @param i {number} (entier) qui sera utilisé comme "seed".
|
||||
* @returns {string} une couleur hexadécimale
|
||||
*/
|
||||
export function randomColor(i){
|
||||
const base = (i % 256).toString(16);
|
||||
return `${base}${base}${base}`
|
||||
}
|
||||
@@ -0,0 +1,25 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div>
|
||||
<input type="text" id="input1"/>
|
||||
<button id="exo1">Ajouter</button>
|
||||
<ul id="list1" >
|
||||
<li>Foo</li>
|
||||
<li>Bar</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<button id="effacer">Effacer</button>
|
||||
|
||||
<script src="main.js" type="module"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,46 @@
|
||||
|
||||
function addItemInList(name){
|
||||
const li = document.createElement("li");
|
||||
li.innerText = name;
|
||||
document.getElementById("list1").appendChild(li);
|
||||
}
|
||||
|
||||
function click(){
|
||||
const value = document.getElementById("input1").value;
|
||||
addItemInList(value);
|
||||
addToLocalStorage(value);
|
||||
}
|
||||
|
||||
function addToLocalStorage(value) {
|
||||
let listeStockage = getListFromLocalStorage();
|
||||
listeStockage.push(value);
|
||||
localStorage.setItem("elm", JSON.stringify(listeStockage));
|
||||
}
|
||||
|
||||
function clear(){
|
||||
localStorage.removeItem("elm");
|
||||
// const listElement = document.getElementById("list1");
|
||||
// const children = new Array(listElement.children);
|
||||
// for(const child of children){
|
||||
// listElement.removeChild(child);
|
||||
// }
|
||||
}
|
||||
|
||||
function getListFromLocalStorage() {
|
||||
let serialized = localStorage.getItem("elm");
|
||||
if(!serialized){
|
||||
return []
|
||||
}
|
||||
return JSON.parse(serialized);
|
||||
}
|
||||
|
||||
function initializeList(){
|
||||
const items = getListFromLocalStorage();
|
||||
for(const item of items){
|
||||
addItemInList(item);
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("exo1").addEventListener("click", click);
|
||||
document.getElementById("effacer").addEventListener("click", clear);
|
||||
initializeList();
|
||||
@@ -0,0 +1,9 @@
|
||||
const port = 8080;
|
||||
|
||||
function handler(request: Request): Response {
|
||||
const body = "hello world";
|
||||
return new Response(body, { status: 200 });
|
||||
};
|
||||
|
||||
console.log(`HTTP server running. Access it at: http://localhost:8080/`);
|
||||
Deno.serve({ port: port }, handler);
|
||||
@@ -0,0 +1,21 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<svg width="100" height="100">
|
||||
<rect x="10" y="30" width="20" height="20" fill="blue" stroke="black" stroke-width="2" />
|
||||
<rect x="30" y="10" width="20" height="20" fill="blue" stroke="black" stroke-width="2"/>
|
||||
<rect x="30" y="30" width="20" height="20" fill="blue" stroke="black" stroke-width="2"/>
|
||||
<rect x="50" y="30" width="20" height="20" fill="blue" stroke="black" stroke-width="2"/>
|
||||
</svg>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,20 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<button id="button">boom</button>
|
||||
<button id="button1">boom</button>
|
||||
<button id="button2">boom</button>
|
||||
<button id="button3">boom</button>
|
||||
|
||||
<script src="main.js" type="module"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,40 @@
|
||||
|
||||
class FatBoom{
|
||||
word(){
|
||||
return "boom de fat classe";
|
||||
}
|
||||
|
||||
boom = (evt) => {
|
||||
alert(this.word())
|
||||
}
|
||||
}
|
||||
|
||||
class Boom{
|
||||
word(){
|
||||
return "boom de classe";
|
||||
}
|
||||
|
||||
boom(evt){
|
||||
alert(this.word())
|
||||
}
|
||||
}
|
||||
|
||||
function boom(){
|
||||
alert("hello world")
|
||||
}
|
||||
|
||||
const fatBoom = () => {
|
||||
alert("HELLO WORLD")
|
||||
}
|
||||
|
||||
document.getElementById("button")
|
||||
.addEventListener("click", boom)
|
||||
|
||||
document.getElementById("button1")
|
||||
.addEventListener("click", fatBoom)
|
||||
|
||||
document.getElementById("button2")
|
||||
.addEventListener("click", (new Boom()).boom)
|
||||
|
||||
document.getElementById("button3")
|
||||
.addEventListener("click", (new FatBoom()).boom)
|
||||
@@ -0,0 +1,100 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport"
|
||||
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
|
||||
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||
<title>Dessin d'enfants</title>
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">
|
||||
<script src="main.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<figure class="image" style="text-align: center;">
|
||||
<svg style="height: 500px; width: 500px; border: solid; border-color: pink;" id="canvas"></svg>
|
||||
</figure>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Centre X du Cercle</label>
|
||||
<div class="control">
|
||||
<input class="input"
|
||||
id="cx"
|
||||
type="number"
|
||||
min="1"
|
||||
max="500"
|
||||
placeholder="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Centre Y du Cercle</label>
|
||||
<div class="control">
|
||||
<input class="input"
|
||||
id="cy"
|
||||
type="number"
|
||||
min="1"
|
||||
max="500"
|
||||
placeholder="250">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<div class="field">
|
||||
<label class="label">Rayon du Cercle</label>
|
||||
<div class="control">
|
||||
<input class="input"
|
||||
type="number"
|
||||
id="cr"
|
||||
min="1"
|
||||
max="500"
|
||||
placeholder="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column">
|
||||
<br>
|
||||
<button id="draw-circle" class="button mt-2">Ajouter Cercle</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<table class="table table is-fullwidth">
|
||||
<thead>
|
||||
<tr><th>Id</th><th>Centre</th><th>Rayon</th><th>Actions</th></tr>
|
||||
</thead>
|
||||
<tbody id="table-body">
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="columns is-centered">
|
||||
<div class="column is-two-thirds">
|
||||
<button id="clear-drawing" class="button mt-2">Tout Effacer</button>
|
||||
<button id="inverse-drawing" class="button mt-2">Inverser l'ordre</button>
|
||||
<button id="draw-simple-circle" class="button mt-2">Cercle Simple</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,103 @@
|
||||
|
||||
import {drawCircles, populateTable, Circle, Point, randomColor} from "https://cdn.jsdelivr.net/gh/didiercrunch/cours-420-301-ah@tp1.1/modules-examples/mod.js";
|
||||
|
||||
const circles = []
|
||||
|
||||
function getCircleById(circleId){
|
||||
for(const circle of circles){
|
||||
if(circle.getId() === circleId){
|
||||
return circle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function onClickUp(circleId){
|
||||
const circle = getCircleById(circleId);
|
||||
const center = circle.getCenter();
|
||||
const newCenter = new Point(center.getX(), center.getY() - 10);
|
||||
circle.setCenter(newCenter);
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function onClickDown(circleId){
|
||||
const circle = getCircleById(circleId);
|
||||
const center = circle.getCenter();
|
||||
const newCenter = new Point(center.getX(), center.getY() + 10);
|
||||
circle.setCenter(newCenter);
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function onClickLeft(circleId){
|
||||
const circle = getCircleById(circleId);
|
||||
const center = circle.getCenter();
|
||||
const newCenter = new Point(center.getX() - 10, center.getY());
|
||||
circle.setCenter(newCenter);
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function onClickRight(circleId){
|
||||
const circle = getCircleById(circleId);
|
||||
const center = circle.getCenter();
|
||||
const newCenter = new Point(center.getX() + 10, center.getY());
|
||||
circle.setCenter(newCenter);
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
|
||||
|
||||
function onClickPaint(circleId){
|
||||
const circle = getCircleById(circleId);
|
||||
circle.setColor(randomColor(Date.now()))
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function pointToString(point){
|
||||
return `(${point.getX()}, ${point.getY()})`;
|
||||
}
|
||||
|
||||
function drawNewCircle(){
|
||||
const x = parseInt(document.getElementById("cx").value)
|
||||
const y = parseInt(document.getElementById("cy").value)
|
||||
const r = parseInt(document.getElementById("cr").value)
|
||||
const p = new Point(x, y);
|
||||
const circle = new Circle(p, r, Date.now());
|
||||
circles.push(circle);
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function inverseCircles(){
|
||||
circles.reverse();
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function clearCircles(){
|
||||
circles.length = 0;
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function drawSimpleCircle(){
|
||||
circles.length = 0;
|
||||
const circle = new Circle(new Point(250, 250), 50, Date.now());
|
||||
circles.push(circle);
|
||||
renderCircles();
|
||||
}
|
||||
|
||||
function renderCircles(){
|
||||
drawCircles(document.getElementById("canvas"), circles);
|
||||
populateTable(document.getElementById("table-body"),
|
||||
circles,
|
||||
pointToString,
|
||||
onClickUp,
|
||||
onClickDown,
|
||||
onClickLeft,
|
||||
onClickRight,
|
||||
onClickPaint);
|
||||
}
|
||||
|
||||
|
||||
|
||||
document.getElementById("draw-circle").addEventListener("click", drawNewCircle);
|
||||
document.getElementById("clear-drawing").addEventListener("click", clearCircles);
|
||||
document.getElementById("inverse-drawing").addEventListener("click", inverseCircles);
|
||||
document.getElementById("draw-simple-circle").addEventListener("click", drawSimpleCircle);
|
||||
|
||||
Reference in new issue
Block a user