Update X - JavaScript

master
Denis MIGDAL 2 years ago
parent 05a823114f
commit 672c46fe07

@ -48,7 +48,9 @@ include_toc: true
1. <mark>[D-TS]</mark> JS (+ TS type - basique)
2. <mark>[C-Deno]</mark> Deno + Deno/TS config + npm + Deno API + serveur
2. Classes, fonctions avancées, autres.
3. [C-Deno] Deno + Deno/TS config + npm + Deno API + serveur
1. BDD API
@ -56,11 +58,9 @@ include_toc: true
3. etc.
3. [<mark>D-TS</mark>] TS avancé
4. [X] WebComponents en vrai / Animations / transitions / canvas / WebWorker
5. [X] WebPack / CI/CD / unit tests / tests de recettes (en pratique) / validation des données runtime
5. [<mark>D-TS</mark>] TS avancé / WebPack / CI/CD / unit tests / tests de recettes (en pratique) / validation des données runtime
## S5 .....

@ -7,45 +7,359 @@ include_toc: true
[TOC]
# Structures de données natives
# JavaScript et TypeScript
<mark>TODO</mark>
Au semestre précédent, nous avons utilisé Brython afin d'exécuter du Python dans le navigateur. En réalité Brython transforme le code Python en JavaScript qui est ensuite interprété par le navigateur. En effet, le navigateur ne peut exécuter que deux langages :
+ types de bases / array / object / Map / Set + conversions + Date / RegExp
- **WASM** : une sorte de langage bas niveau vers lequel d'autres languages peuvent être compilés (e.g. C, C++, Rust, Java, etc).
+ == vs ===
- **JavaScript**
+ Math API
JavaScript signale uniquement les erreurs d'exécutions. Ainsi certaines erreurs de programmations peuvent être silencieuses, ou ne pas être détectées lors de vos tests. Nous utiliserons TypeScript, un sur-ensemble de JavaScript permettant de détecter des erreurs en amont, facilitant grandement les étapes de tests et de développements.
+ Manipuler URL => move 2 JS-DOM API
Typescript permet d'indiquer le type des variables permettant à la fois de documenter l'usage des fonctions, mais aussi de vérifier et garantir qu'une fonction est bien appelée avec les bons paramètres. Ainsi en à peine quelques millisecondes, Typescript est capable de vous avertir d'erreurs de programmations que vous pourriez ne pas détecter, puis passer une journée à chercher. Il facilite aussi grandement les étapes de refactoring, e.g. lorsque la signature d'une fonction change, et requiert alors de changer son appel dans l'intégralité de votre code.
+ class + getter/setter + private/protected + interface + iterator / async inter / héritage + fonctionnement prototype (méthode => fct et inversement + bind)
Au semestre précédent, nous avons utilisé l'API JS/DOM via Brython. Nous utiliserons la même API ce semestre, i.e. vous réutiliserez les mêmes fonctions et paramètres, seul le langage utlisé change.
+ + ts enum
## Utilisation de JavaScript
+ commentaires / const / readonly / frozen
```html
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
<script src="$JS_FILE" type="module" defer></script>
</head>
<body>
</body>
</html>
```
## Utilisation de TypeScript
TypeScript est tout d'abord converti en JavaScript à l'aide de la commande shell `tsc`. Les options sont soient données en paramètre de la commande, ou indiquées dans le fichier `tsconfig.json`.
L'option `--watch` permet de générer les fichiers JS à chaque modifications du fichier TS correspondant. Son avantage majeur est d'intégrer un cache en RAM permettant d'éviter de re-générer les fichiers JS de fichiers TS non-modifiés. Il permet ainsi un gain de temps significatif lors du développement, passant de plusieurs minutes de traduction pour de gros projets, à quelques millisecondes.
## Exécution de TypeScript côté serveur
JavaScript et TypeScript peuvent non seulement s'exécuter sur le navigateur, côté client, mais aussi côté serveur à l'aide d'interpréteurs comme `Node` ou `Deno`. Utiliser le même langage côté client et côté serveur possède plusieurs avantages :
- **factoriser** des parties de codes utilisés à la fois côté client et côté serveur.
- **déplacer** aisément des calculs du côté serveur vers le côté client et inversement.
- évite d'avoir à apprendre et **maîtriser deux langages** différents.
Dans le cadre de ce module, nous utiliserons `Deno` qui permet d'exécuter directement des fichiers TS sans avoir à générer des fichiers JS via `tsc`.
Nous étudierons plus en détails `Deno` dans le cours suivant.
# Types et structures de données natives
## Déclaration d'une variable
Contrairement à Python, JS possède 3 manières de déclarer une variable :
```javascript
let a = ...; // "block-scoped".
var a = ...; // "function-scoped".
const A = ...; // une constante, i.e. ne peut être modifiée.
```
*Note:* contrairement à Python, JS n'a pas besoin du mot clef `global` pour accéder à une variable globale. L'object `globalThis` contient l'ensemble des variables globales.
## Types de bases
JavaScript distingue 6 types de base :
| Déclaration | JS Type | Python Type |
| -------------------- | ----------- | ------------ |
| `let a = 42;` | `number` | `float` |
| `let a = true;` | `boolean` | `bool` |
| `let a = "str";` | `string` | `str` |
| `let a = undefined;` | `undefined` | ≈ `NoneType` |
| `let a = {a: 42}` | `object` | ≈ `dict` |
| `let a = foo;` | `function` | `function` |
Il existe plusieurs valeurs spéciales :
| Valeur | JS Type | En Python | Remarques |
| -------------------------- | ----------- | ----------------- | ------------------------------- |
| `NaN` | `number` | `float('nan')` | Not a Number (e.g. 0/0) |
| `Number.POSITIVE_INFINITY` | `number` | `float('inf')` | |
| `Number.NEGATIVE_INFINITY` | `number` | `float('-inf')` | |
| `0b01010111` | `number` | `0b01010111` | Nombre en binaire. |
| `0o777` | `number` | `0o777` | Nombre en octal |
| `0xFF` | `number` | `0xFF` | Nombre en hexadécimal |
| `1.2e2` | `number` | `1.2e2` | Nombre en notation scientifique |
| `true` | `boolean` | `True` | |
| `false` | `boolean` | `False` | |
| `` `val: ${value}` `` | `string` | `f"val: {value}"` | littéraux de gabarits |
| `null` | `object` | ≈ `None` | valeur "pas de valeurs" |
| `undefined` | `undefined` | ≈ `None` | valeur inexistante |
Pour retrouver le type d'une variable, vous pouvez utiliser `typeof $VAR`, qui est l'équivalent de `type($VAR)` en Python.
# Structures de données <mark>[TODO]</mark>
base object/array (vs tupple list python)
## Opérateurs
JavaScript utilise les mêmes opérateurs que Python à quelques exceptions près.
### Opérateurs bit à bits :
| Opérateur | Nom |
| --------- | ----------- |
| `a\|b` | OU binaire |
| `a&b` | ET binaire |
| `a^b` | XOR binaire |
| `~a` | NOT binaire |
### Opérateurs logique
| JavaScript | Python | Commentaires |
| ---------- | --------- | --------------------- |
| `a\|\|b` | `a or b` | OU logique |
| `a&&b` | `a and b` | ET logique |
| `!a` | `not a` | NON logique |
| `a??b` | | Coallescence des nuls |
💡 *Astuce :* l'opérateur de coallescence des nuls peut être utilisé pour indiquer des valeurs par défauts :
```javascript
let a ??= b; // si a est null ou undefined, a = b.
let a ||= b; // si a est évalué à false, a = b
```
### Opérateurs de comparaison
| JavaScript | Python | Commentaires |
| ---------- | ------------ | ---------------------------- |
| `a == b` | `a == b` | égalité de valeur (à éviter) |
| `a != b` | `a != b` | |
| `a === b` | `a is b` | égalité stricte |
| `a !== b` | `a is not b` | |
+ console/assert
Opérateurs communs : `>`, `>=`, `<`, `<=`.
+ opérateurs (vs Python
### Opérateurs arithmétiques
+ déstructuration / décomposition / gabarit / coalescence des nuls / chaînage opt
+ + dans les fonctions
Opérateurs communs : `+` (binaire et unaire), `-` (binaire et unaire), `/`, `%`, `*`, `**`
+ Exceptions
| JavaScript | Python | Commentaires |
| ---------- | ------ | ---------------------------------- |
| `++a` | `a+=1` | incrément |
| `a++` | | retourne la valeur puis incrémente |
| `--a` | `a-=1` | décrément |
| `a--` | | retourne la valeur puis décrémente |
+ structures conditionnelles
### Opérateurs d'affectations
+ imports
Comme en python, il s'agit des opérateurs arithmétiques suffixé d'un `=`.
+ fct async (#30)
Par exemple `a += b` est équivalent à `a = a+b`.
+ fct génératrices
### Autres opérateurs <mark>[TODO]</mark>
+ Deno API
- destructuration / décomposition / chaînage opt (.?)
- []
- in
- delete
### Conversions
```javascript
let a = +$VALUE; // number
let a = !!$VALUE; // boolean
let a = (5).toString(); // string "5"
let a = (5).toString(2);// string "101"
```
📖 `0`, `""`, `null`, `undefined`, sont évalués à `false`.
## Indications de type avec Typescript
### Indication explicite de type
```typescript
let a = 42; // TS déduit que a est un number.
let a: number = 42; // on indique explicitement le type.
```
### Union de types
Il arrive qu'une variable puisse prendre des valeurs de plusieurs types différents :
```typescript
let a = 42; // TS déduit que a est un number.
a = "42"; // erreur, a ne peut être qu'un number.
let a: number | string = 42;
a = "42"; // légal
```
### Valeur optionnelle
Il arrive qu'une variable puisse ne pas avoir de valeurs à l'initialisation :
```javascript
let a: number; // erreur.
let a: number|undefined; // légal
```
### Alias de types
<mark>TODO: intérêt</mark>
```typescript
type X = number | string;
let a: X = 42; // équivaut à let a: number | string = 42;
```
### TS typeof
⚠ Il existe 2 `typeof`, un JS qui déduit le type de la **valeur** à l'exécution, et un TS qui, dans les indications de types, indique le type TS de la **variable**.
```typescript
type A = typeof a; // TS, number | string
console.log(typeof a); // JS, string
```
### Types pour les structures de données
- generics TS `Array<X>` / types array / `Record<x, y>` / typescript []
# Structures de contrôle
## Conditions
```javascript
// [JS] Javascript
+
if( $COND2 ) {
} else if($COND2) {
} else {
}
```
```python
# [🐍] Python
if $COND1:
pass
elif $COND2
pass
else
pass
```
## Opérateur ternaire
```javascript
// [JS] Javascript
let a = $COND ? $IF_TRUE : $IF_FALSE
let a = $COND
? $IF_TRUE
: $IF_FALSE
```
```python
# [🐍] Python
a = $IF_TRUE if $COND else $IF_FALSE
```
## Switch
```javascript
// [JS] Javascript
switch(value) {
case 'value':
//...
break;
default:
//...
}
```
```python
# [🐍] Python
match value:
case 'value':
pass
case _:
pass
```
## Boucles
### While
```javascript
// [JS] Javascript
while($COND) {
}
```
```python
# [🐍] Python
while $COND:
pass
```
### Do while
```javascript
// [JS] Javascript
do {
// s'exécute au moins une fois.
} while( $COND );
```
### For in (parcours les clefs)
```javascript
// [JS] Javascript
for( let value in $OBJ ) {
}
```
### For of (parcours les valeurs)
```javascript
// [JS] Javascript
for( let value of $OBJ ) {
}
```
## Exceptions
```javascript
// [JS] Javascript
try {
throw new Error($MESSAGE)
} catch(error) {
} finally {
}
```
```python
# [🐍] Python
try:
raise Exception($MESSAGE)
except Exception as error:
pass
finally:
pass
```
# Fonctions
@ -198,3 +512,29 @@ const foo = function(arg1, arg2){ ... ; return x; }
- Promise
- motivation + pas bloquer thread principal
# CM2
## Fonctions avancées ?
## Classes
- class + getter/setter + private/protected + interface + iterator / async inter / héritage + fonctionnement prototype (méthode => fct et inversement + bind)
- - ts enum + mixins
- + well-known symbols
## Importations et exportations (CM2?)
## Quelques API utiles (CM2 ?)
- Math API
- Crypto
- Date / RegExp
- object / array / Map / Set / string APIs
## Futur
- Manipuler URL => move 2 JS-DOM API ?
- console/assert => move 2 JS-DOM API ?

Loading…
Cancel
Save