didier/cours-420-301-ah
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: didier/cours-420-301-ah:006.4
didier/cours-420-301-ah:main
didier/cours-420-301-ah:006.4 didier/cours-420-301-ah:006.3 didier/cours-420-301-ah:tp1.1 didier/cours-420-301-ah:006.2 didier/cours-420-301-ah:006.1
...
compare: didier/cours-420-301-ah:main
didier/cours-420-301-ah:main
didier/cours-420-301-ah:006.4 didier/cours-420-301-ah:006.3 didier/cours-420-301-ah:tp1.1 didier/cours-420-301-ah:006.2 didier/cours-420-301-ah:006.1
16 Commits
006.4 ... main
Author SHA1 Message Date
didier amyot c20bbefcf1 better example 2024-02-01 08:29:13 -05:00
didier amyot cdf1258831 added thisthat 2024-01-31 20:33:46 -05:00
didier amyot 8a72eec139 going somewhere. 2024-01-27 06:54:28 -05:00
didier amyot 1569c514d4 added matias' work 2024-01-26 20:36:53 -05:00
didier amyot f4fd5984f3 simplify work 2024-01-26 20:00:24 -05:00
didier amyot d3de0c0ad1 added random example 2024-01-26 18:54:03 -05:00
didier amyot 0fedae6143 added persistance exercice 2024-01-26 17:02:17 -05:00
didier amyot a3872b028e no idea 2024-01-19 18:39:20 -05:00
didier amyot 5a6d3b15ac added examples 2024-01-17 18:44:54 -05:00
didier amyot 1f85f8145d cours d'aujourd hui 2024-01-12 21:14:30 -05:00
didier amyot 1c3ad4fcbf added solution of first homework 2024-01-04 12:08:33 -05:00
didier amyot 0dd3b65a74 pour waim 2023-12-22 20:40:56 -05:00
didier amyot f792f15caa added example 2023-12-22 19:41:58 -05:00
didier amyot c3702e57c9 updated documentation 2023-12-22 12:05:47 -05:00
didier amyot 66fa2c4424 added docs 2023-12-20 20:53:37 -05:00
didier amyot 279d501098 added stuff 2023-12-20 18:21:47 -05:00
23 changed files with 2150 additions and 4 deletions
Expand all files Collapse all files

No files matched your search

.gitignore
+1
View File
@@ -3,3 +3,4 @@
node_modules node_modules
package.json package.json
package-lock.json package-lock.json
.ipynb_checkpoints
Classes_exemples.ipynb
+419
View File
@@ -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
}
Untitled.ipynb
+533
View File
@@ -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
}
Untitled1.ipynb
+33
View File
@@ -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
}
advent-of-code/day11.ts
+100
View File
@@ -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")
classes/index.html
+14
View File
@@ -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>
classes/main.js
+66
View File
@@ -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
color-picker/index.html
+14
View File
@@ -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>
docs/index.html
+277 -4
View File
@@ -162,6 +162,12 @@
#dateOfBirth #dateOfBirth
</a></li> </a></li>
<li><a
href='#hockeyplayerstatisticscurrentage'
class='regular pre-open'>
#currentAge
</a></li>
<li><a <li><a
href='#hockeyplayerstatisticssetnumberofplayedgames' href='#hockeyplayerstatisticssetnumberofplayedgames'
class='regular pre-open'> class='regular pre-open'>
@@ -281,11 +287,35 @@
<li><a <li><a
href='#point' href='#point'
class=""> class=" toggle-sibling">
Point Point
<span class='icon'>▸</span>
</a> </a>
<div class='toggle-target display-none'>
<ul class='list-reset py1-ul pl1'>
<li class='h5'><span>Instance members</span></li>
<li><a
href='#pointgetx'
class='regular pre-open'>
#getX
</a></li>
<li><a
href='#pointgety'
class='regular pre-open'>
#getY
</a></li>
</ul>
</div>
</li> </li>
@@ -326,6 +356,12 @@
#setColor #setColor
</a></li> </a></li>
<li><a
href='#circlesetcenter'
class='regular pre-open'>
#setCenter
</a></li>
<li><a <li><a
href='#circlegetid' href='#circlegetid'
class='regular pre-open'> class='regular pre-open'>
@@ -1235,6 +1271,55 @@ has a name (first and last) and a date of birth.</p>
</section>
</div>
</div>
<div class='border-bottom' id='hockeyplayerstatisticscurrentage'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>currentAge()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Returns the current age of the player in years.</p>
<div class='pre p1 fill-light mt0'>currentAge()</div>
@@ -1501,7 +1586,7 @@ has a name (first and last) and a date of birth.</p>
<div class="clearfix small pointer toggle-sibling"> <div class="clearfix small pointer toggle-sibling">
<div class="py1 contain"> <div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a> <a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>setNumberOfGoals(goals)</span> <span class='code strong strong truncate'>setNumberOfGoals(numberOfGoals, goals)</span>
</div> </div>
</div> </div>
<div class="clearfix display-none toggle-target"> <div class="clearfix display-none toggle-target">
@@ -1511,7 +1596,7 @@ has a name (first and last) and a date of birth.</p>
<p>Set the total number of goal scored by the player</p> <p>Set the total number of goal scored by the player</p>
<div class='pre p1 fill-light mt0'>setNumberOfGoals(goals: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</div> <div class='pre p1 fill-light mt0'>setNumberOfGoals(numberOfGoals: any, goals: <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</div>
@@ -1526,6 +1611,14 @@ has a name (first and last) and a date of birth.</p>
<div class='py1 quiet mt1 prose-big'>Parameters</div> <div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'> <div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>numberOfGoals</span> <code class='quiet'>(any)</code>
</div>
</div>
<div class='space-bottom0'> <div class='space-bottom0'>
<div> <div>
<span class='code bold'>goals</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code> <span class='code bold'>goals</span> <code class='quiet'>(<a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a>)</code>
@@ -2205,6 +2298,124 @@ représenté par deux coordonnées x et y.</p>
<div class='py1 quiet mt1 prose-big'>Instance Members</div>
<div class="clearfix">
<div class='border-bottom' id='pointgetx'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>getX()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Retoure la coordonée X du point.</p>
<div class='pre p1 fill-light mt0'>getX(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>
<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
</section>
</div>
</div>
<div class='border-bottom' id='pointgety'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>getY()</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<p>Retoure la coordonée Y du point.</p>
<div class='pre p1 fill-light mt0'>getY(): <a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></div>
<div class='py1 quiet mt1 prose-big'>Returns</div>
<code><a href="https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Number">number</a></code>:
</section>
</div>
</div>
</div>
@@ -2520,6 +2731,68 @@ de l'id.
</section>
</div>
</div>
<div class='border-bottom' id='circlesetcenter'>
<div class="clearfix small pointer toggle-sibling">
<div class="py1 contain">
<a class='icon pin-right py1 dark-link caret-right'>▸</a>
<span class='code strong strong truncate'>setCenter(center)</span>
</div>
</div>
<div class="clearfix display-none toggle-target">
<section class='p2 mb2 clearfix bg-white minishadow'>
<div class='pre p1 fill-light mt0'>setCenter(center: <a href="#point">Point</a>)</div>
<div class='py1 quiet mt1 prose-big'>Parameters</div>
<div class='prose'>
<div class='space-bottom0'>
<div>
<span class='code bold'>center</span> <code class='quiet'>(<a href="#point">Point</a>)</code>
, le nouveau centre du cercle.
</div>
</div>
</div>
</section> </section>
</div> </div>
dom/index.html
+19
View File
@@ -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>
json-gnome-exemple.ipynb
+220
View File
@@ -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
}
mithril-example/index.html
+23
View File
@@ -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>
mithril-example/main.js
+49
View File
@@ -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());
mithril-example/style.css
+15
View File
@@ -0,0 +1,15 @@
.blue{
color: blue;
}
.red{
color: red;
}
.big{
font-size: 1.8em;
}
.small{
font-size: 0.7em;
}
modules-examples/tp1.js
+3
View File
@@ -89,6 +89,9 @@ export class Circle{
this.#color = color; this.#color = color;
} }
/**
* @param {Point} center, le nouveau centre du cercle.
*/
setCenter(center){ setCenter(center){
this.#center = center; this.#center = center;
} }
persistance/index.html
+25
View File
@@ -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>
persistance/main.js
+46
View File
@@ -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();
server/servet.ts
+9
View File
@@ -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);
svg/index.html
+21
View File
@@ -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>
thisthat/index.html
+20
View File
@@ -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>
thisthat/main.js
+40
View File
@@ -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)
tp-01-solution/index.html
+100
View File
@@ -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>
tp-01-solution/main.js
+103
View File
@@ -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);