@Pr0l0g33k

Installer Pandoc

mar., 30 janv. 2024 00:00:00 +0100

Temps de lecture : 3 min

Pandoc un convertisseur universel de document

Pandoc est un logiciel de traitement de texte open source qui peut être utilisé pour convertir des documents entre différents formats. Il existe plusieurs façons d’installer Pandoc.

Installation à partir de la page de téléchargement

Pour installer Pandoc à partir de la page de téléchargement, procédez comme suit :

Accédez à la page de téléchargement de Pandoc : https://pandoc.org/installing.html
Téléchargez l’installateur de package pour votre système d’exploitation.
Exécutez l’installateur pour installer Pandoc.

Installation à partir d’un fichier zip

Pour installer Pandoc à partir d’un fichier zip, procédez comme suit :

Téléchargez le fichier zip contenant les binaires de Pandoc et la documentation.
Décompressez le fichier zip.
Déplacez les binaires vers un répertoire de votre choix.

Installation à l’aide de Chocolatey

Pour installer Pandoc à l’aide de Chocolatey, procédez comme suit :

Ouvrez une invite de commande.
Exécutez la commande suivante :

choco install pandoc

Installation à l’aide de winget

Pour installer Pandoc à l’aide de winget, procédez comme suit :

Ouvrez une invite de commande.
Exécutez la commande suivante :

winget install --source winget --exact --id JohnMacFarlane.Pandoc

Recommandations

Par défaut, Pandoc crée des PDFs à l’aide de LaTeX. Il est recommandé d’installer LaTeX via MiKTeX. Avec l’option --pdf-engine, vous pouvez toutefois spécifier d’autres programmes pour cette tâche.

Mise en garde

L’utilisation de plusieurs méthodes d’installation peut entraîner deux installations distinctes de Pandoc. Il est recommandé de désinstaller correctement Pandoc avant de passer à une méthode d’installation alternative.

Installation sur linux par WSL

Vérifiez si la version de pandoc dans votre gestionnaire de paquets n’est pas obsolète. Pandoc se trouve dans les dépôts de Debian, Ubuntu, Slackware, Arch, Fedora, NixOS, openSUSE, gentoo et Void.

Pour obtenir la dernière version, nous proposons un paquet binaire pour l’architecture amd64 sur la page de téléchargement.

L’exécutable est lié statiquement et n’a pas de dépendances dynamiques ni de dépendances sur des fichiers de données externes. Remarque : en raison du lien statique, le binaire pandoc de ce paquet ne peut pas utiliser les filtres lua qui nécessitent des modules lua externes écrits en C.

Un tarball et un installateur deb sont fournis. Pour installer le deb :

sudo dpkg -i $DEB

Exemple au moment de l’écriture :

wget https://github.com/jgm/pandoc/releases/download/3.1.11.1/pandoc-3.1.11.1-1-amd64.deb

sudo dpkg -i pandoc-3.1.11.1-1-amd64.deb

où $DEB est le chemin vers le deb téléchargé. Cela installera l’exécutable pandoc et la page de manuel.

Si vous utilisez une distribution basée sur RPM, vous pourrez peut-être installer le deb de notre page de téléchargement à l’aide d’alien.

Sur n’importe quelle distribution, vous pouvez installer à partir du tarball dans $DEST (par exemple, /usr/local/ ou $HOME/.local) en faisant :

tar xvzf $TGZ --strip-components 1 -C $DEST

où $TGZ est le chemin vers le tarball zippé téléchargé. Pour les versions de Pandoc antérieures à 2.0, qui ne fournissent pas de tarball, essayez plutôt :

ar p $DEB data.tar.gz | tar xvz --strip-components 2 -C $DEST

Vous pouvez également installer à partir de la source, en utilisant les instructions ci-dessous sous Compilation à partir de la source. Notez que la plupart des distributions ont la plate-forme Haskell dans leurs dépôts de paquets. Par exemple, sur Debian/Ubuntu, vous pouvez l’installer avec

apt-get install haskell-platform

Par défaut, Pandoc crée des PDFs à l’aide de LaTeX. Nous vous recommandons d’installer TeX Live via votre gestionnaire de paquets. (Sur Debian/Ubuntu, apt-get install texlive). Avec l’option --pdf-engine, vous pouvez toutefois spécifier d’autres programmes pour cette tâche.

Mémo Python

dim., 19 nov. 2023 00:00:00 +0100

Install python on windows

python on windows

https://python-docs.readthedocs.io/en/latest/starting/install3/win.html

https://python-docs.readthedocs.io/en/latest/dev/virtualenvs.html#virtualenvironments-ref

Running python

Réference :

cd mon_projet

python -m venv mon_venv

source mon_venv/bin/activate

# Sur windows
mon_venv\Scripts\activate

deactivate

install requirement

pip install -r requirements.txt

initiation

python POO

Design Patterns du GoF en Python

implementation 1

implementation 2

complete book

Les design patterns du GoF sont un ensemble de 23 design patterns qui ont été décrits dans le livre "Design Patterns: Elements of Reusable Object-Oriented Software".

Table 1. Voici une liste des design patterns du GoF
Nom	Description
Factory Method	Crée des objets sans spécifier la classe exacte à instancier.
Abstract Factory	Crée des familles d’objets liés ou dépendants sans spécifier leur classe concrète.
Builder	Sépare la construction d’un objet complexe de sa représentation afin que le même processus de construction puisse créer différentes représentations.
Prototype	Crée de nouveaux objets en copiant un prototype existant.
Singleton	Restreint l’instanciation d’une classe à un seul objet.
Adapter	Convertit l’interface d’une classe en une autre interface que le client attend.
Bridge	Découple une abstraction de son implémentation afin que les deux puissent varier indépendamment.
Composite	Compose des objets dans des structures d’arborescence pour représenter des hiérarchies de partie-tout.
Decorator	Attache dynamiquement des responsabilités supplémentaires à un objet.
Facade	Fournit une interface unifiée à un ensemble d’interfaces dans un sous-système.
Flyweight	Réduit le coût de création et d’utilisation d’objets légers.
Proxy	Fournit un substitut ou un espace réservé pour un autre objet afin de contrôler l’accès à celui-ci.
Chain of Responsibility	Permet à plus d’un objet de traiter une demande.
Command	Encapsule une demande dans un objet, permettant ainsi de paramétrer des clients avec différentes demandes, files d’attente ou journaux, et de supporter des opérations annulables.
Interpreter	Donne une représentation de la grammaire d’une langue et utilise cette représentation pour interpréter des phrases dans cette langue.
Iterator	Fournit un moyen de parcourir séquentiellement les éléments d’un objet agrégé sans exposer sa représentation sous-jacente.
Mediator	Permet de réduire les dépendances complexes entre les objets en les faisant communiquer uniquement via un objet médiateur.
Memento	Fournit la capacité de restaurer un objet à son état précédent (sans violer l’encapsulation).
Observer	Définit une dépendance un-à-plusieurs entre les objets de sorte que lorsqu’un objet change d’état, tous ses dépendants sont notifiés et mis à jour automatiquement.
State	Permet à un objet de changer de comportement lorsqu’il change d’état interne.
Strategy	Définit une famille d’algorithmes, encapsule chacun d’eux et les rend interchangeables.
Template Method	Définit le squelette d’un algorithme dans une méthode, reportant certaines étapes aux sous-classes.
Visitor	Permet de définir une nouvelle opération à effectuer sur une structure d’objets sans changer les classes des objets sur lesquels elle opère.

Functional programming

Bibliothèque

URL

Description

PyMonad

https://github.com/jasondelaat/pymonad

PyMonad est une implémentation de structures de données monadiques en Python basée sur des langages de programmation tels que Haskell et F# avec des implémentations pour les types de monades les plus couramment utilisés en programmation fonctionnelle. article

PyFunctional

https://github.com/EntilZha/PyFunctional/

PyFunctional est une bibliothèque Python pour la programmation fonctionnelle qui fournit des outils pour travailler avec des fonctions pures et des itérables.

Toolz

https://toolz.readthedocs.io/en/latest/

Toolz est une bibliothèque Python pour la programmation fonctionnelle qui fournit des outils pour travailler avec des fonctions pures et des itérables.

Fn.py

https://github.com/kachayev/fn.py

Fn.py est une bibliothèque Python pour la programmation fonctionnelle qui fournit des outils pour travailler avec des fonctions pures et des itérables.

Coconut

https://coconut-lang.org/

Coconut ajoute plusieurs fonctionnalités à Python pour la programmation fonctionnelle, y compris le pattern matching. conversation sof

side effects

loops

# impérative way
result = []
for i in inputs:
    x = f(g(i))
    result.append(x)

# idiomatic way
result = map(comp(f,g), inputs)

Mémo Typescript

sam., 19 août 2023 00:00:00 +0200

github repository: ts-codebase

index.html

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
</head>

<body>
    Intro typescript
    <script src="01_types.js"></script>
    <script src="02_data_structure.js"></script>
    <script src="03_enums_tuples.js"></script>
</body>

</html>

Les types en typescript

01_types.ts

/**
 * Les types en typescript
 */

//quand le type n'est pas defini des le debut,
// alors il est réassignable
// c'est le type Any qui est attribué par défaut
let my_var;
my_var = "username";
console.assert(my_var === "username");
my_var = 11;
console.assert(my_var === 11);
my_var = true;
console.assert(my_var === true);

let age = 1;
console.assert(age === 1);
age = 2;
// age="trois" c'est impossible
// car l'inference de type a attribué le type number
console.assert(age === 2);

// Déclaration explicite de type
let pi: Number = 3.14;
console.assert(typeof pi === "number");

Intro typescript

Fonctions

Les fonctions sont des blocs de code réutilisables.

Exemple de cote :

const add = (a: number, b: number): number => a + b;

Intro typescript

Structure de données

02_data_structure.ts

/***
 * Structure de données:
 * Avec le type any on peut changer
 * le type de la variable à tout instruction
 * Lorsque l'on fixe le type
 * alors il n'est plus possible de le changer
 * lors d'une assignation
 */

// Arrays
let buddies: any[] = [
    "@CCCP.education",
    "imrandeh",
    "issoudeh",
    "soumi92"
]

console.assert(buddies[0] === "@CCCP.education");
console.assert(buddies[1] === "imrandeh");
console.assert(buddies[2] === "issoudeh");
console.assert(buddies[3] === "soumi92");
// Déclaré en type any, l'inference de type
// a bien réaligné en type string
console.assert(typeof buddies[0] === "string");
console.assert(typeof buddies[1] === "string");
console.assert(typeof buddies[2] === "string");
console.assert(typeof buddies[3] === "string");



let writers: (String | String | String | Number)[][] = [
    ["Chrétien", "de Troyes", "fr", 12],
    ["François", "Rabelais", "fr", 16],
    ["René", "Descartes", "fr", 17],
    ["Jean-Jacques", "Rousseau", "fr", 18],
    ["Georg", "Hegel", "de", 19],
    ["Karl", "Marx", "de", 19],
    ["Friedrich", "Engels", "de", 19],
    ["Victor", "Hugo", "fr", 19],
    ["Paul", "Verlaine", "fr", 19],
    ["Arthur", "Rimbaud", "fr", 19],
    ["Gérard", "de Nerval", "fr", 19],
    ["Georg", "Lukacs", "hu", 20],
    ["Franz", "Kafka", "hu", 20],
    ["Antonio", "Gramsci", "it", 20],
    ["Domenico","Losurdo","it",20],
];

// console.table(writers);


// Objects
let author: {
    first_name: String,
    last_name: String,
    lang: String,
    century: Number
} = {
    // slice(-1) renvoie le dernier élèment
    first_name: writers.slice(-1)[0][0] as String,
    last_name: writers.slice(-1)[0][1] as String,
    lang: writers.slice(-1)[0][2] as String,
    century: writers.slice(-1)[0][3] as Number,
}


// assertion sur la valeur en accés par encapsulation(dot)
console.assert(author.first_name === "Antonio")
console.assert(author.last_name === "Gramsci")
console.assert(author.lang === "it")
console.assert(author.century === 20);

// assertion sur le type en accès par index
console.assert(typeof author["first_name"] === "string")
console.assert(typeof author["last_name"] === "string")
console.assert(typeof author["lang"] === "string")
console.assert(typeof author["century"] === "number");

Intro typescript

Enums et tuples

03_enums_tuples.ts

/**
 * Enums et Tuples
 *
 * Enum: il existe les enums numérique
 * et les enums chaine de caracteres.
 *
 * Tuple: similaire aux arrays mais ne peut
 * contenir qu'une valeur de type spécifié.
 *
 */

//Enum numérique
// l'index par de debut défaut est 0
// ici on le place a 1
enum Week {
    Monday = 1,
    Tuesday = 2,
    Wednesday = 3,
    Thursday = 4,
    Friday = 5,
    Saturday = 6,
    Sunday = 7,
};

console.assert(Week.Monday == 1);
console.assert(Week.Tuesday == 2);
console.assert(Week.Wednesday == 3);
console.assert(Week.Thursday == 4);
console.assert(Week.Friday == 5);
console.assert(Week.Saturday == 6);
console.assert(Week.Sunday == 7);

console.assert(Week[1] === "Monday");
console.assert(Week[2] === "Tuesday");
console.assert(Week[3] === "Wednesday");
console.assert(Week[4] === "Thursday");
console.assert(Week[5] === "Friday");
console.assert(Week[6] === "Saturday");
console.assert(Week[7] === "Sunday");

let motd_arr_fr: String[] = [
    "Associé à la Lune",
    "Du dieu Tiw, associé à Mars",
    "Du dieu germanique Odin",
    "Du dieu germanique du tonnerre Thor",
    "De la déesse germanique Frigga associée à Vénus",
    "Associé à Saturne",
    "Associé au Soleil",
];

let motd_arr_en: String[] = [
    "associated with the Moon",
    "from the god Tiw, associated with Mars",
    "from Germanic god Odin",
    "from Germanic god of thunder Thor",
    "from Germanic goddess Frigga associated with Venus",
    "associated with Saturn",
    "associated with the Sun",
];

// Un tuple (triple)
let monday_triple_fr: [
    Number,
    String,
    String
] = [
        Week.Monday,
        Week[Week.Monday],
        motd_arr_fr[0],
    ];


console.assert(monday_triple_fr[0] === 1);
console.assert(monday_triple_fr[1] === "Monday");
console.assert(monday_triple_fr[2] === "Associé à la Lune");


let monday_triple_en: [
    Number,
    String,
    String
] = [
        Week.Monday,
        Week[Week.Monday],
        motd_arr_en[0],
    ];

console.assert(monday_triple_en[0] === 1);
console.assert(monday_triple_en[1] === "Monday");
console.assert(monday_triple_en[2] === "associated with the Moon");


// On se fait un type pour ajouter le nom de la langue
type Meaning_of_the_day = {
    lang: String,
    meaning: (Week | String)[][],
};

//fonction d'affichage du type Meaning_of_the_day
const display_motd = (motd: Meaning_of_the_day) => {
    motd.meaning.forEach(day =>
        console.table(`${Week[day[0] as Week]}: ${day[1]}.(${motd.lang})`)
    )
};

//fonction d'assertion sur le type Meaning_of_the_day
// afin de verifier la concordance du contenu avec
// motd_arr_#lang#
const test_motd = (
    motd: Meaning_of_the_day,
    motd_arr: String[]
) => {
    console.assert(motd.lang.length === 2)
    for (const [i, value] of motd.meaning.entries()) {
        console.assert(value[1] === motd_arr[i]);
    }
};


let motd_fr: Meaning_of_the_day = {
    lang: "fr",
    meaning: [
        [Week.Monday, motd_arr_fr[0]],
        [Week.Tuesday, motd_arr_fr[1]],
        [Week.Wednesday, motd_arr_fr[2]],
        [Week.Thursday, motd_arr_fr[3]],
        [Week.Friday, motd_arr_fr[4]],
        [Week.Saturday, motd_arr_fr[5]],
        [Week.Sunday, motd_arr_fr[6]],
    ],
}

console.log("---------");
console.log("display_motd(motd_fr):");
display_motd(motd_fr);
test_motd(motd_fr, motd_arr_fr)


let motd_en: Meaning_of_the_day = {
    lang: "en",
    meaning: [
        [Week.Monday, motd_arr_en[0]],
        [Week.Tuesday, motd_arr_en[1]],
        [Week.Wednesday, motd_arr_en[2]],
        [Week.Thursday, motd_arr_en[3]],
        [Week.Friday, motd_arr_en[4]],
        [Week.Saturday, motd_arr_en[5]],
        [Week.Sunday, motd_arr_en[6]],
    ],
}

console.log("---------");
console.log("display_motd(motd_en):");
display_motd(motd_en);
console.log("---------");
test_motd(motd_en, motd_arr_en);

// Un tuple (triple) utilisant le type
// Meaning_of_the_day pour peupler le meaning
let motd_triple: [
    Number,
    String,
    String
] = [
        Week.Monday,
        Week[Week.Monday],
        motd_fr.meaning[0][1] as String
    ];

console.assert(motd_triple[0] === 1);
console.assert(motd_triple[1] === "Monday");
console.assert(motd_triple[2] === "Associé à la Lune");

Intro typescript

Void et Never

04_void_never_types.ts

// Le type void est l'opposé du type any
// c'est l'absence de type.
function verify_writers_length(): void {
    console.assert(writers.length > 0);
}

verify_writers_length();

const verify_writers_length_arrow = (): void =>
    console.assert(writers.length > 0);

verify_writers_length_arrow();

//Type of et never
let value = 30;
console.assert(typeof value === "number");

//never: qqchs qui n'arrive jamais
function foo(x: String | Number): Boolean {
    if (typeof x === "string") {
        return true;
    } else if (typeof x === "number") {
        return false;
    }
    return fail("Error!")
}

function fail(message: String): never {
    throw new Error(message as string);
}

Intro typescript

Classes et interfaces

04_void_never_types.ts

/**
 * Les classes:
 * members,
 * visibility,
 * nommage,
 * accesseurs
 * scope identifier: static,private,protected
 *
 * convention de nommage :
 * Les membres private sont préfixés avec un _ *
 */

class Member {
    username: String = "";
    email: String = "";
    private _password: String = "";
    readonly signup_date: Date = new Date(Date.now());

    constructor(username: String, email: String) {
        this.username = username;
        this.email = email;
    }

    get password(): String {
        return this._password;
    }

    set password(new_password: String) {
        this._password = new_password;
    }

    /**
     * Une fonction static qui initilise un member,
     * à partir d'un author
     */
    static fromAuthor(author: {
        first_name: String,
        last_name: String,
        lang: String,
        century: Number
    }): Member {
        return new Member(
            `${author.first_name}.${author.last_name}`,
            `${author.first_name}.${author.last_name}@acme.com`,
        );
    }
};


let domenico = Member.fromAuthor(author);
domenico.password = "test";

console.assert(domenico.email === "Domenico.Losurdo@acme.com");
console.assert(domenico.password === "test");


// Héritage
enum Forms {
    Undefined = 0,
    Polygones = 1,
    Circle = 2,
    Straight = 3,
    Segment = 4,
};

class Form {
    type: Forms = Forms.Undefined;
};

class Rectangle extends Form {
    h: Number = 0;
    w: Number = 0;
};

class Square extends Rectangle {
    side: Number = 0;
};


/**
 * Interface donne un contrat à un type.
 * Les interfaces permettent de définir la structure d'un objet.
 */

interface IPerson {
    username: String;
    email: String;
    readonly signup_date: Date;
}

const user1: IPerson = {
    username: Member.fromAuthor(author)["username"],
    email: Member.fromAuthor(author)["email"],
    signup_date: Member.fromAuthor(author)["signup_date"],
}

Intro typescript

Le fichier tsconfig.json

tsconfig.json

{
  /* Visit https://aka.ms/tsconfig to read more about this file */
  "compileOnSave": true,

  "compilerOptions": {
    "target": "es2016",
    "module": "CommonJS",
    "noEmitOnError": true,
    "strict": true,
    "noImplicitAny": true,
    "esModuleInterop": true
  }
}

Intro typescript

Modules

Les modules permettent d’organiser le code en plusieurs fichiers.

Exemple de cote :

// Dans un fichier math.ts
export const add = (a: number, b: number): number => a + b;

// Dans un autre fichier
import { add } from './math';
let result = add(2, 3);

Intro typescript

Promesses

Les promesses sont utilisées pour effectuer des opérations asynchrones.

Exemple de cote :

const promise = new Promise<string>((resolve) => {
    // Code asynchrone ici
    resolve("Succès");
});

promise.then((result) => {
    console.log(result);
});

Intro typescript

async/await

L’async/await simplifie la gestion des promesses.

Exemple de cote :

const fetchData = async (): Promise<void> => {
    const result = await someAsyncFunction();
    console.log(result);
};

Intro typescript

Génériques

Les génériques permettent de créer des composants réutilisables avec des types dynamiques.

Exemple de cote :

const identity = <T>(arg: T): T => arg;

const output = identity<string>("hello");
console.log(output);

Mémo CSS

lun., 14 août 2023 00:00:00 +0200

Table des matieres

Bon liens
Répository et code sample
Début CSS

Bon liens

Table des matieres

Répository et code sample

github repository: css-codebase

Début CSS

Intro & Mise en place
Les textes
Background
Les boites (boxes)
Flexbox
Grid
Position absolute
Le responsive
Débug & Conclusion

Table des matieres

Intro & Mise en place

Intro basé sur cette vidéo:

github repository: début css

memo source:
index.html

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cours CSS</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Les bases de CSS</h1>
    </header>

    <main>
      <div class="flexbox">
        <h2>Flexbox</h2>
        <ul>
          <li>boite 1</li>
          <li>boite 2</li>
          <li>boite 3</li>
        </ul>
      </div>

      <div class="grid">
        <h2>Grid</h2>
        <div class="grid-container">
          <img src="./assets/img/css-logo.png" alt="logo css" />

          <form action="">
            <input type="text" id="firstname" placeholder="Prénom" />
            <input type="text" id="surname" placeholder="Nom" />
            <textarea
              cols="30"
              rows="10"
              placeholder="Ici votre message"
            ></textarea>
            <input type="submit" value="Valider" id="btn-submit" />
          </form>
        </div>
      </div>

      <div class="absolute">
        <h2>Absolute</h2>
        <span id="circle1"></span>
        <span id="circle2"></span>
      </div>
    </main>
  </body>
</html>

Relier le fichier style.css à la page html:

</head>
  <link rel="stylesheet" href="style.css" />
</head>

Début CSS

Les textes

/* import remote de font sur l'ensemble de la feuille*/
@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");

/* import local de font */
@font-face {
  font-family: "DMSerif";
  src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
}

/*
body est le parent de toutes les balises,
qu'il contient, donc je le déclare avant,
pour la logique de précédence de parent
*/
body {
  /* si DMSerif n'est pas trouvé alors il se rabat sur Verdana*/
  font-family: "DMSerif", Verdana;
}

/* va styliser toutes les balises h1,
celles de body sont surchargés,
par la déclaration présente */
h1 {
  text-transform: uppercase;
  /* espacement entre les lettres en pixel*/
  letter-spacing: 3px;
  /* alignement du texte*/
  text-align: center;
  /* Les tailles de polices doivent être en REM  (rem = root em).
  Le REM se base pas sur l'élément parent pour obtenir sa taille mais sur l'élément racine. Ainsi 1rem prendra sa valeur de la font-size de votre document (body ou html).*/
  font-size: 2.5rem;
  /* ombrage du texte */
  text-shadow:
  3px /* offset-x */
  3px /* offset-y */
  8px /* blur-radius */
  #00000042/* color */;
  /* couleur du texte */
  color: #ab0ef4;
  /*attibuer les polices(font): liste, ordonnée par priorité, de polices à utiliser pour mettre en forme le texte de l'élément ciblé.*/
  font-family: "Oswald", sans-serif;
  /* surligner le text*/
  text-decoration: underline;
}

Début CSS

Background

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");

@font-face {
  font-family: "DMSerif";
  src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
}

body {
  font-family: "DMSerif", Verdana;
  /* image comme background*/
  background: url(./assets/img/bg.jpg) center/cover;
  /* 100VH = 100% de la taille de l'écran (viewport height)
  min afin de ne pas bloquer la possibilité d'avoir un plus grand */
  min-height: 100vh;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 3px 3px 8px #00000042;
  color: #ab0ef4;
  font-family: "Oswald", sans-serif;
  text-decoration: underline;
}

Début CSS

Les boites (boxes)

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");

@font-face {
  font-family: "DMSerif";
  src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
}

/* *: létoile donne du style a tous les éléments.
Ensuite remettre un à un les parametres par defaut afin d'eviter les stylisation inattendu.*/
* {
  /* surcharge de base tous les elements à padding 0*/
  margin: 0;
  /* surcharge de base tous les elements à padding 0*/
  padding: 0;
}

body {
  font-family: "DMSerif", Verdana;
  /* image comme background*/
  background: url(./assets/img/bg.jpg) center/cover;
  min-height: 100vh;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 3px 3px 8px #00000042;
  color: #ab0ef4;
  font-family: "Oswald", sans-serif;
  text-decoration: underline;
}

main {
  background: rgba(245, 245, 245, 0.9);
  min-height: 500px;
  /* quelque soit la taille de l'écran,
  la boite fait toujours 90% de la taille de la page,
  les 10% restant sont une marge à droite,
  pour avoir 5% de chaque coté on ajoute une margin, tel que [0, auto]*/
  width: 90%;
  /* haut bas prend 0, et  gauche droite prend auto(center cad meme de chaque cotés)*/
  margin: 0 auto;
  /* on ajoute des bords a notre boite*/
  border: 2px solid rgb(0, 140, 255);
  /* on arrondis les coins de la boite*/
  border-radius: 20px 20px 0 0;
  /* ombrage sur la boite*/
  box-shadow: 0px 0px 20px 4px #81cfc6;
  /* marge interrieure de la boite sur tous les cotés*/
  padding: 15px;
}

h2 {
  /* afin de recuprer le comportement par defaut qui a ete surchargé par l'operateur étoile*/
  margin: 0;
}

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cours CSS</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Les bases de CSS</h1>
    </header>

    <main>
      <div class="flexbox">
        <h2>Flexbox</h2>
        <ul>
          <li>boite 1</li>
          <li>boite 2</li>
          <li>boite 3</li>
        </ul>
      </div>
    </main>
  </body>
</html>

Début CSS

Flexbox

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");

@font-face {
  font-family: "DMSerif";
  src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
}

body {
  font-family: "DMSerif", Verdana;
  background: url(./assets/img/bg.jpg) center/cover;
  min-height: 100vh;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 3px 3px 8px #00000042;
  color: #ab0ef4;
  font-family: "Oswald", sans-serif;
  text-decoration: underline;
}

main {
  background: rgba(245, 245, 245, 0.9);
  min-height: 500px;
  width: 90%;
  margin: 0 auto;
  border: 2px solid rgb(0, 140, 255);
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 0px 20px 4px #81cfc6;
  padding: 15px;
}

h2 {
  margin: 0;
}

/* le point permet d'acceder à la classe d'un composant*/
.flexbox {
  border: 2px solid skyblue;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
  min-height: 150px;
}

/* FLEXBOX */
/* Sert à répartir équitablement des éléments sur la page */
.flexbox ul {
  padding: 0;
  /* aligne les éléments enfants de ul(les li)*/
  display: flex;
  /* reparti convenablement(équitablement les li sur la page) */
  justify-content: space-around;
}
/* ce style concerne les li de la classe,
flexbox des balises qui y font referencent*/
.flexbox li {
  /* suprime les boules des éléments de la list li*/
  list-style: none;
  height: 160px;
  width: 160px;
  margin: 10px;
  background: turquoise;
  /* Centrer un unique élément verticalement et horizontalement */
  display: flex;
  justify-content: center;
  align-items: center;
}

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cours CSS</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <header>
      <h1>Les bases de CSS</h1>
    </header>

    <main>
      <div class="flexbox">
        <h2>Flexbox</h2>
        <ul>
          <li>boite 1</li>
          <li>boite 2</li>
          <li>boite 3</li>
        </ul>
      </div>
    </main>
  </body>
</html>

Début CSS

Grid

Pour répartir des éléments de maniere un peu plus complexe qu’avec les flexbox, avec un systeme de grille entre autres.

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");

@font-face {
  font-family: "DMSerif";
  src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
}

body {
  font-family: "DMSerif", Verdana;
  background: url(./assets/img/bg.jpg) center/cover;
  min-height: 100vh;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 3px 3px 8px #00000042;
  color: #ab0ef4;
  font-family: "Oswald", sans-serif;
  text-decoration: underline;
}

main {
  background: rgba(245, 245, 245, 0.9);
  min-height: 500px;
  width: 90%;
  margin: 0 auto;
  border: 2px solid rgb(0, 140, 255);
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 0px 20px 4px #81cfc6;
  padding: 15px;
}

h2 {
  margin: 0;
}

.flexbox,
.grid {
  border: 2px solid skyblue;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
  min-height: 150px;
}

.flexbox ul {
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.flexbox li {
  list-style: none;
  height: 160px;
  width: 160px;
  margin: 10px;
  background: turquoise;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* GRID */
.grid-container {
  display: grid;
  /* séparatuion de la grille en deux(à ses deux enfants),
  avec à gauche 30% pour l'image
  et à droite 70% pour le formulaire*/
  grid-template-columns: 30% 70%;
}

/* sizing de l'image css-logo
contenu dans la classe grid
qui est dans le parent grid-container*/
.grid img {
  /* l'image remplt 80% de part de grille*/
  width: 80%;
  margin: 20px auto;
  display: block;
}

form {
  display: grid;
  /* deux colonnes de chacune 1 fraction*/
  grid-template-columns: 1fr 1fr;
  /* trois rangés de chacune 1 fraction*/
    grid-template-rows: 1fr 1fr 1fr;
    /* structuration sous forme de template
    de notre repartition des composants
    enfants de la forme*/
  grid-template-areas:
    "i1 i2"/* i1: input1, i2:input2*/
    "ta ta"/*ta: text area */
    "vi bt"/*vi:, bt: bouton */;
}

/* on donne du style sur deux éléments
en meme temps en les listant
avant les parentheses*/
input,
textarea {
  margin: 5px;
  border: 1px solid darkblue;
  padding: 10px;
  font-size: 1.1rem;
  font-family: "DMSerif";
  border-radius: 5px;
}

/* donner du style uniquement la textearea*/
textarea {
  /* renseigner le nommage pour le grid template area*/
  grid-area: ta;
  height: 40px;
  /* empeche le cassage du style de la page
  en empechant le resizing de la textarea
  du formulaire*/
  resize: none;
}
/* pour pointer un id d'élément html
on utilise la notation préfixe # */
#btn-submit {
  /* renseigner le nommage*/
  grid-area: bt;
  /* change le le symbole de curseur
  souris quand il survole sur le bouton*/
  cursor: pointer;
  background: cyan;
  transition: 0.2s;
}

/* au survole(hover) de la souris
le bouton change de comportement*/
#btn-submit:hover {
  background: darkblue;
  /* couleur de text du bouton devient blanc*/
  color: white;
}

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cours CSS</title>

    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <header>
        <h1>Les bases de CSS</h1>
    </header>

    <main>
        <div class="flexbox">
            <h2>Flexbox</h2>
            <ul>
                <li>boite 1</li>
                <li>boite 2</li>
                <li>boite 3</li>
            </ul>
        </div>

        <div class="grid">
            <h2>Grid</h2>
            <div class="grid-container">
                <img src="./assets/img/css-logo.png" alt="logo css" />

                <form action="">
                    <input type="text" id="firstname" placeholder="Prénom" />
                    <input type="text" id="surname" placeholder="Nom" />
                    <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea>
                    <input type="submit" value="Valider" id="btn-submit" />
                </form>
            </div>
        </div>
    </main>
</body>

</html>

Début CSS

Position absolute

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");

@font-face {
  font-family: "DMSerif";
  src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
}

body {
  font-family: "DMSerif", Verdana;
  background: url(./assets/img/bg.jpg) center/cover;
  min-height: 100vh;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  font-size: 2.5rem;
  text-shadow: 3px 3px 8px #00000042;
  color: #ab0ef4;
  font-family: "Oswald", sans-serif;
  text-decoration: underline;
}

main {
  background: rgba(245, 245, 245, 0.9);
  min-height: 500px;
  width: 90%;
  margin: 0 auto;
  border: 2px solid rgb(0, 140, 255);
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 0px 20px 4px #81cfc6;
  padding: 15px;
}

h2 {
  margin: 0;
}

.flexbox,
.grid,
.absolute {
  border: 2px solid skyblue;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
  min-height: 150px;
}

.flexbox ul {
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.flexbox li {
  list-style: none;
  height: 160px;
  width: 160px;
  margin: 10px;
  background: turquoise;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 30% 70%;
}

.grid img {
  width: 80%;
  margin: 20px auto;
  display: block;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "i1 i2" "ta ta" "vi bt";
}

input,
textarea {
  margin: 5px;
  border: 1px solid darkblue;
  padding: 10px;
  font-size: 1.1rem;
  font-family: "DMSerif";
  border-radius: 5px;
}

textarea {
  grid-area: ta;
  height: 40px;
  resize: none;
}

#btn-submit {
  grid-area: bt;
  cursor: pointer;
  background: cyan;
  transition: 0.2s;
}

#btn-submit:hover {
  background: darkblue;
  color: white;
}

/* ABSOLUTE  */
/* Sans élément en Relative, de base, l'élément en absolute l'est par rapport au Body  */
/* Il faut mettre une position relative au parent pour contraindre l'élément en absolute dans ses frontières  */
.absolute {
  /* position relative par rapport à son parent,
  donc contenu dans les frontieres de son parents*/
  position: relative;
}


#circle1 {
  height: 80px;
  width: 80px;
  background: skyblue;
  position: absolute;
  border-radius: 150px;
  top: -20px;
  right: -20px;
}

#circle2 {
  height: 40px;
  width: 40px;
  border-radius: 150px;
  background: teal;
  position: absolute;
  left: 50%;
  transform:
  /*traslate de 50% de la taille du cercle,
  pour etre centré par rapport au centre du cercle,
  plutot que sur son bord gauche par défaut.*/
  translateX(-50%);
  top: 100px;
}

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cours CSS</title>

    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <header>
        <h1>Les bases de CSS</h1>
    </header>

    <main>
        <div class="flexbox">
            <h2>Flexbox</h2>
            <ul>
                <li>boite 1</li>
                <li>boite 2</li>
                <li>boite 3</li>
            </ul>
        </div>

        <div class="grid">
            <h2>Grid</h2>
            <div class="grid-container">
                <img src="./assets/img/css-logo.png" alt="logo css" />

                <form action="">
                    <input type="text" id="firstname" placeholder="Prénom" />
                    <input type="text" id="surname" placeholder="Nom" />
                    <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea>
                    <input type="submit" value="Valider" id="btn-submit" />
                </form>
            </div>
        </div>

        <div class="absolute">
            <h2>Absolute</h2>
            <span id="circle1"></span>
            <span id="circle2"></span>
        </div>
    </main>
</body>

</html>

Début CSS

Le responsive

@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap");

@font-face {
  font-family: "DMSerif";
  src: url(./assets/fonts/DMSerifDisplay-Regular.ttf);
}

body {
  font-family: "DMSerif", Verdana;
  background: url(./assets/img/bg.jpg) center/cover;
  min-height: 100vh;
}

h1 {
  text-transform: uppercase;
  letter-spacing: 3px;
  text-align: center;
  /* pour etre plus responsive on peut passer la taille en vw(view port width) pour qu'elle s'adapte à la taille de l'ecran*/
  font-size: 2.5rem;
  text-shadow: 3px 3px 8px #00000042;
  color: #ab0ef4;
  font-family: "Oswald", sans-serif;
  text-decoration: underline;
}

main {
  background: rgba(245, 245, 245, 0.9);
  min-height: 500px;
  width: 90%;
  margin: 0 auto;
  border: 2px solid rgb(0, 140, 255);
  border-radius: 20px 20px 0 0;
  box-shadow: 0px 0px 20px 4px #81cfc6;
  padding: 15px;
}

h2 {
  margin: 0;
}

.flexbox,
.grid,
.absolute {
  border: 2px solid skyblue;
  border-radius: 10px;
  padding: 10px;
  margin-top: 20px;
  min-height: 150px;
}

.flexbox ul {
  padding: 0;
  display: flex;
  justify-content: space-around;
}

.flexbox li {
  list-style: none;
  height: 160px;
  width: 160px;
  margin: 10px;
  background: turquoise;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid-container {
  display: grid;
  grid-template-columns: 30% 70%;
}

.grid img {
  width: 80%;
  margin: 20px auto;
  /* permet en media query de la centrer en petit écran*/
  display: block;
}

form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  grid-template-areas: "i1 i2" "ta ta" "vi bt";
}

input,
textarea {
  margin: 5px;
  border: 1px solid darkblue;
  padding: 10px;
  font-size: 1.1rem;
  font-family: "DMSerif";
  border-radius: 5px;
}

textarea {
  grid-area: ta;
  height: 40px;
  resize: none;
}

#btn-submit {
  grid-area: bt;
  cursor: pointer;
  background: cyan;
  transition: 0.2s;
}

#btn-submit:hover {
  background: darkblue;
  color: white;
}

.absolute {
  position: relative;
}


#circle1 {
  height: 80px;
  width: 80px;
  background: skyblue;
  position: absolute;
  border-radius: 150px;
  top: -20px;
  right: -20px;
}

#circle2 {
  height: 40px;
  width: 40px;
  border-radius: 150px;
  background: teal;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100px;
}

/* RESPONSIVE:
a partir des tailles d'ecran permet de surcharger les reglages definis plus haut
*/
@media screen and (max-width: 900px) {
  .grid-container {
    display: block;
  }
  .grid-container img {
    width: 40%;
  }
}

@media screen and (max-width: 610px) {
  .flexbox ul {
    flex-direction: column;
    align-items: center;
  }

  form {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
      "i1"
      "i2"
      "ta"
      "bt";
  }
  input,
  textarea {
    font-size: 0.8rem;
  }
}

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cours CSS</title>

    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <header>
        <h1>Les bases de CSS</h1>
    </header>

    <main>
        <div class="flexbox">
            <h2>Flexbox</h2>
            <ul>
                <li>boite 1</li>
                <li>boite 2</li>
                <li>boite 3</li>
            </ul>
        </div>

        <div class="grid">
            <h2>Grid</h2>
            <div class="grid-container">
                <img src="./assets/img/css-logo.png" alt="logo css" />

                <form action="">
                    <input type="text" id="firstname" placeholder="Prénom" />
                    <input type="text" id="surname" placeholder="Nom" />
                    <textarea cols="30" rows="10" placeholder="Ici votre message"></textarea>
                    <input type="submit" value="Valider" id="btn-submit" />
                </form>
            </div>
        </div>

        <div class="absolute">
            <h2>Absolute</h2>
            <span id="circle1"></span>
            <span id="circle2"></span>
        </div>
    </main>
</body>

</html>

Début CSS

Débug & Conclusion

/* all elements:
supprime les comportements par défaut*/
* {
  /* les marges à zéro*/
  margin: 0;
  /* les parge internes(padding) à zéro*/
  padding: 0;
  /* tous les bords avec un cadre rouge de 2px.
  qui est ou et qui fait quoi...*/
  border: 2px solid red;
}

Début CSS

Mémo HTML

dim., 13 août 2023 00:00:00 +0200

Table des matieres

Bon liens
Répository et code sample

Bon liens

htmlcheatsheet.com: HTML Cheatsheet
fontawesome.com: bibliothèque d’icones
toptal.com/designers/htmlarrows/symbols: Icones natives en HTML

Table des matieres

Répository et code sample

github repository: html-codebase

memo source:
index.html

<!DOCTYPE html>
<html lang="fr">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <!-- Le titre de la page  -->
  <title>Cours HTML</title>
  <!-- Icone de l'onglet -->
  <link rel="shortcut icon" href="html-logo.png" />
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" />
</head>

<body>
  <header>
    <h1>Texte - Titre H1</h1>
    <p>
      <em>em pour mettre en italique</em>,
      <strong>strong pour mettre en gras</strong>
      <span>L'élement en span ne revient pas à la ligne</span>.
    </p>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem
      cumque ratione veniam officiis nulla a debitis at facilis sed
      dignissimos.
    </p>
  </header>

  <section>
    <div>
      <h2>Photo - Titre H2</h2>
      <img src="./img-1.jpg" alt="image-arbre" height="200" />
    </div>

    <div>
      <h3>Liste - Titre H3</h3>
      <ul>
        <li>UL = unordered list</li>
        <li>UL = unordered list</li>
        <li>UL = unordered list</li>
      </ul>
      <ol>
        <li>OL = ordered list</li>
        <li>OL = ordered list</li>
        <li>OL = ordered list</li>
      </ol>
    </div>

    <div>
      <h4>Tableaux - Titre H4</h4>
      <table border="4" cellpadding="10" cellspacing="4" style="text-align: center">
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
            <th>Col 3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td rowspan="2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
          </tr>
          <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
          </tr>
          <tr>
            <td colspan="3">Row 3 Cell 1</td>
          </tr>
        </tbody>
      </table>
    </div>

    <div>
      <h5><span>&#9814;</span> Liens - Titre H5</h5>
      <a href="https://htmlcheatsheet.com/" target="_blank">HTML Cheatsheet</a>
      <br />
      <a href="https://www.toptal.com/designers/htmlarrows/symbols/" target="_blank">Icones natifs en HTML</a>
    </div>

    <div>
      <h6><i class="fas fa-video"></i> Vidéo - Titre H6</h6>
      <video src="video.mp4" height="150" autoplay loop muted></video>
    </div>
  </section>
  <br />
  <!-- Formulaires en HTML -->
  <section>
    <h2>Formulaire</h2>
    <form action="/action.php" method="post">
      <label for="name">Nom</label>
      <input id="name" type="text" placeholder="Entrez votre nom" /><br />

      <label for="number">Entrez votre age</label>
      <input type="number" id="number-age" value="15" oninput="document.getElementById('range-age').value=this.value">
      <input type="range" id="range-age" min="0" max="100"
        oninput="document.getElementById('number-age').value=this.value"><br />

      <!-- Input select -->
      <label for="gender">Genre</label>
      <select id="gender">
        <option selected="selected" value="Homme">Homme</option>
        <option value="Femme">Femme</option>
      </select><br />

      <!-- Input radio -->
      <div>
        <input type="radio" name="type" id="human" checked />
        <label for="human">Humain</label>

        <input type="radio" name="type" id="dog" />
        <label for="dog">Chien</label>

        <input type="radio" name="type" id="cat" />
        <label for="cat">Chat</label>
      </div>

      <textarea cols="20" rows="5" placeholder="Votre message..."></textarea><br />

      <!-- Input Checkbox -->
      <label><input type="checkbox" />Accepter les CGV</label> <br />
      <input type="submit" value="Submit" />
    </form>
  </section>
  <br />
  <!-- Mail & envoi de fichiers -->
  <footer>
    <a href="mailto:fs@gmail.com">Ecrivez-moi !</a>
    <br />
    <a href="notice.txt" download="nom-du-fichier">Télécharger la notice</a>
    <details>
      <summary>Plus d'infos</summary>
      <p>
        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Harum,
        repellendus.
      </p>
    </details>
  </footer>
</body>

</html>

Table des matieres

Mémo Javascript

ven., 4 août 2023 00:00:00 +0200

github repository: js-codebase

Intro Javascript

Variables, opérateurs arithmétiques et chaines de caractères
Les arrays
Les fonctions
Paramètres et scopes
Les objects
Les boucles
Const, var et let
Rest et spread operators
Destructuring
Import et export de modules
Utilisation des classes

index.html

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
</head>

<body>
    index
    <script src="01_start.js"></script>
    <script src="02_arrays.js"></script>
    <script src="03_functions.js"></script>
    <script src="04_param_x_scope.js"></script>
    <script src="05_objects.js"></script>
    <script src="06_loops.js"></script>
    <script src="07_const_var_let.js"></script>
    <script src="08_rest_and_spread_operators.js"></script>
    <script src="09_destructuring.js"></script>
    <script src="10_module_import_export.js"></script>
</body>

</html>

Intro Javascript

Variables, opérateurs arithmétiques et chaines de caractères

01_start.js

/**
 * Variables
 */
//une variable stupide
var my_variable = "dummy variable";
console.log(my_variable);

//assertion
console.assert(my_variable === "dummy variable");

var username = "@CCCP.education";
console.log(username);
console.assert(username === "@CCCP.education");

//concaténation de string
console.assert(username === "cher" + "oliv");

/**
 *  Opérateur arithmétique: + - * / %
 */
//integer
var x = 10;
var y = 5;
var z = 20;

console.log(x + y);
console.assert(x + y === 15);

console.log(x + y - z);
console.assert(x + y - z === -5);


console.log(x - y);
console.assert(x - y === 5);


console.log(x * y);
console.assert(x * y === 50);

console.log(x / y);
console.assert(x / y === 2);


console.log("---------");

x = 20;
y = 10;

console.log(x + y);
console.assert(x + y === 30);

console.log(x + y - z);
console.assert(x + y - z === 10);


console.log(x - y);
console.assert(x - y === 10);

console.log(x * y);
console.assert(x * y === 200);

console.log(x / z);
console.assert(x / z === 1);


//Littéraux de gabarits pour string avec backstick `
//Template literals (Template strings)
console.assert(`typeof z: ${typeof z}` === "typeof z: number");

console.log(`x is type of : ${typeof x}`);
console.log(`y is type of : ${typeof y}`);
console.log(`z is type of : ${typeof z}`);

//typeof: donne le type de la variable
console.assert(typeof x === "number");
console.assert(typeof y === "number");
console.assert(typeof z === "number");


console.log("---------");
/**
 * Incrémenation/décrémentation
 */
//incrémantation/décrémentation préfixe
console.log(++x) //incrémenté puis affiché: 21
console.log(x) //la valeur incrémenté: 21

//incrémantation/décrémentation suffixe
console.log(y++) //affiche la valeur sans incrémenation puis incrémente: 10
console.log(y) //la valeur incrémenté: 11

//décrémentation
x--;
y--;
console.assert(x === 20);
console.assert(y === 10);


/**
 * String: chaine de caractères
 */
console.log(`username: ${username}`);

//taille de la string
console.log(`username.length: ${username.length}`);
console.assert(username.length === 8);
console.assert(username.length === "@CCCP.education".length);
console.log("---------");

Intro Javascript

Les arrays

02_arrays.js

/**
 * Les arrays
 */
// auteurs [["nom ", "prénom", "pays"]]
var writers = [
    ["Karl", "Marx", "de"],
    ["Jean-Jacques", "Rousseau", "fr"],
    ["Victor", "Hugo", "fr"],
    ["René", "Descartes", "fr"],
    ["Paul", "Verlaine", "fr"],
    ["Antonio", "Gramsci", "it"],
    ["Georg", "Lukacs", "hu"],
    ["Franz", "Kafka", "hu"],
    ["Arthur", "Rimbaud", "fr"],
    ["Gérard", "de Nerval", "fr"],
    ["Chrétien", "de Troyes", "fr"],
    ["François", "Rabelais", "fr"],
    ["Georg", "Hegel", "de"],
    ["Friedrich", "Engels", "de"],
]

console.table(writers);

// accés aux élèments du tableau
console.log(writers[0]);
console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`);
console.assert("Karl, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`);

//sauvegarder la valeur du prénom de Marx
var karl = writers[0][0]

//éditer un élement du tableau, le prénom de Marx
writers[0][0] = "Karlito"

console.log(`${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`);
console.assert("Karlito, Marx (de)" === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`);

console.assert("Karl" === karl);

//remettre la valeur initale du prénom de Marx
writers[0][0] = karl;

console.assert(`${karl}, Marx (de)` === `${writers[0][0]}, ${writers[0][1]} (${writers[0][2]})`);

console.log("---------");

/**
 *  Arrays: map/forEach/pop/push/slice/sort/shift/unshift
 */

var numbers = [1, 5, 4, 3, 2];

console.log("Iterate with forEach");
// parcourir avec array.forEach
numbers.forEach((it) => console.log(it));
console.log("---------");

console.log("Iterate with map");
// parcourir avec array.map
numbers.map((it) => console.log(it));
console.log("---------");

//afficher les éléments sur une ligne
//génère la string avec le formatage des nombres
const numbersString = (numberArray) => {
    var consoleOutput = new String();
    numberArray.forEach(number => consoleOutput += `${number}, `);
    return consoleOutput = consoleOutput.substring(0, consoleOutput.length - 2);
};

//affiche la chaine entre crochets dans la console
const displayNumbers = (numbersStr) => {
    console.log(`[${numbersString(numbersStr)}]`);
};

console.log("orginal number array")
displayNumbers(numbers);
console.log("---------");


//push: ajoute à la fin
console.log("push");
numbers.push(6);
displayNumbers(numbers);
console.log("---------");

//pop: suprime le dernier
console.log("pop");
numbers.pop();
displayNumbers(numbers);
console.log("---------");

//unshift: ajouter le parametre au debut de l'array
console.log("unshift");
numbers.unshift(0);
displayNumbers(numbers);
console.log("---------");

//shift: supprime le premier element de l'array
console.log("shift");
numbers.shift();
displayNumbers(numbers);
console.log("---------");

//slice: renvoi l'array entre les positions en argument
console.log("slice");
var sliceNumbersResult = numbers.slice(2, 4);
displayNumbers(sliceNumbersResult);
console.log("---------");

//sort asc
console.log("sort asc");
var ascSort = numbers.sort((a, b) => a - b);
displayNumbers(ascSort);
console.log("---------");

//sort desc
console.log("sort desc");
var descSort = numbers.sort((a, b) => b - a);
displayNumbers(descSort);
console.log("---------");

Intro Javascript

Les fonctions

03_functions.js

/**
 *  Les fonctions
 */

//function style legacy
function sayHelloWorldLegacy() {
    console.log("Hello world legacy!");
}
sayHelloWorldLegacy();

function sayHelloLegacy(firstName, lastName, style) {
    console.log(`Hello ${firstName}, ${lastName} (${style})`);
}
sayHelloLegacy("Cher", "Oliv", "legacy");

console.log("---------");

//function style arrow
const sayHelloWorld = () => console.log("Hello world!");
sayHelloWorld();

const sayHello = (firstName, lastName) =>
    console.log(`Hello ${firstName}, ${lastName}`);
sayHello("Cher", "Oliv");

console.log("---------");

var authors = [
    ["Chrétien", "de Troyes", "fr"],
    ["François", "Rabelais", "fr"],
    ["René", "Descartes", "fr"],
    ["Jean-Jacques", "Rousseau", "fr"],
    ["Georg", "Hegel", "de"],
    ["Karl", "Marx", "de"],
    ["Friedrich", "Engels", "de"],
    ["Victor", "Hugo", "fr"],
    ["Paul", "Verlaine", "fr"],
    ["Antonio", "Gramsci", "it"],
    ["Georg", "Lukacs", "hu"],
    ["Franz", "Kafka", "hu"],
    ["Arthur", "Rimbaud", "fr"],
    ["Gérard", "de Nerval", "fr"],
]


const displayAuthors = (authorsArray) => authorsArray.forEach(author =>
    console.log(`${author[0]} ${author[1]}, (${author[2]})`)
);

displayAuthors(authors);

console.log("---------");

/**
 * valeur par défaut des parametres d'une fonctions
 */
const add = (a = 0, b = 0) => a + b;
console.assert(add() === 0)
console.assert(add(1) === 1)
console.assert(add(1, 1) === 2)

console.log("---------");

Intro Javascript

Paramètres et scopes

04_param_x_scope.js

//global scope: visible partout, dans et hors functions
var global;

const foo = () => {
    //local scope: visible uniquement dans la fonction foo
    var bar = "bar"
    console.log(bar)
}

foo();
console.log("---------");

Intro Javascript

Les objects

05_objects.js

/**
 * Les objects
 */
var authors = [
    ["Chrétien", "de Troyes", "fr"],
    ["François", "Rabelais", "fr"],
    ["René", "Descartes", "fr"],
    ["Jean-Jacques", "Rousseau", "fr"],
    ["Georg", "Hegel", "de"],
    ["Karl", "Marx", "de"],
    ["Friedrich", "Engels", "de"],
    ["Victor", "Hugo", "fr"],
    ["Paul", "Verlaine", "fr"],
    ["Antonio", "Gramsci", "it"],
    ["Georg", "Lukacs", "hu"],
    ["Franz", "Kafka", "hu"],
    ["Arthur", "Rimbaud", "fr"],
    ["Gérard", "de Nerval", "fr"],
];

var hugo = {
    firstName: authors[7][0],
    lastName: authors[7][1],
    country: authors[7][2],
};

var book = {
    author: hugo,
    title: "Les misérables"
};
console.log(hugo);
console.log(book);

//accéder à un membre de l'objet par point
console.log(hugo.country);

//accéder à un membre de l'objet par crochet
console.log(book["title"]);

console.log(book.author.lastName);

console.log(book["author"]["firstName"]);

//ajouter une clé a un objet
hugo.gender = "non binary";
console.assert(hugo.gender === "non binary");


//mettre à jour une clé
hugo.gender = "male";
console.assert(hugo.gender !== "non binary");
console.assert(hugo["gender"] === "male");

//supprimer une clé
delete hugo.gender;


//verfier que l'objet ne contient pas la clé gender
console.assert(!Object.keys(hugo).includes("gender"));


console.log("---------");

Intro Javascript

Les boucles

06_loops.js

/**
 * Les boucles: Itérer sur arrays et objets.
 */

console.log("for loop over array");

var numbers = [12, 10, 8, 6, 4, 2, 0];

for (number of numbers) {
    console.log(number);
}

console.log("---------");

console.log("for loop over object key");

var obj = { a: 1, b: 2, c: 3, d: 4 };

for (key in obj) {
    console.log(key);
}

console.log("---------");

console.log("for loop over object value");

for (value in obj) {
    console.log(obj[value]);
}

console.log("---------");

console.log("another for loop over authors array")

var authors = [
    ["Chrétien", "de Troyes", "fr"],
    ["François", "Rabelais", "fr"],
    ["René", "Descartes", "fr"],
    ["Jean-Jacques", "Rousseau", "fr"],
    ["Georg", "Hegel", "de"],
    ["Karl", "Marx", "de"],
    ["Friedrich", "Engels", "de"],
    ["Victor", "Hugo", "fr"],
    ["Paul", "Verlaine", "fr"],
    ["Antonio", "Gramsci", "it"],
    ["Georg", "Lukacs", "hu"],
    ["Franz", "Kafka", "hu"],
    ["Arthur", "Rimbaud", "fr"],
    ["Gérard", "de Nerval", "fr"],
];

for (const [i, value] of authors.entries()) {
    console.log(`${value[0]}, ${value[1]} (${value[2]})`);
}

console.log("---------");

console.log("while loop over array")

var i = 0
while (i < authors.length) {
    console.log(`${authors[i][0]}, ${authors[i][1]} (${authors[i][2]})`);
    i++;
}

console.log("---------");

Intro Javascript

Const, var et let

07_const_var_let.js

/**
 * const X var X let
 */
//var x du if n'est pas confiné au scope du if
const varTest = () => {
    var x = 1;
    console.log(x);
    console.assert(x === 1);
    if (true) {
        var x = 2;
        console.log(x);
        console.assert(x === 2);
    }
    console.log(x);
    console.assert(x !== 1);
    console.assert(x === 2);
}
varTest();

console.log("---------");

//var x est global à tous les fichier js
//chargés dans la page html
//var x issue du fichier 1_start.js
//ligne 46
console.log(x);
console.assert(x === 20);

console.log("---------");

//premier let x est confiné au scope de la fonction
//le let x du if est confiné au scope du if
const letTest = () => {
    let x = 1;
    console.log(x);
    console.assert(x === 1);
    if (true) {
        let x = 2;
        console.log(x);
        console.assert(x === 2);
    }
    console.log(x);
    console.assert(x === 1);
    console.assert(x !== 2);
}
letTest();

console.log("---------");

/**
 * const: déclare un emplacement mémoire non réattribuable
 * c'est modifiable pour un array,
 * mais non réinitialisable;
 * ex:
 * const arr = [25, 27, 29]
 * arr = [5, 7] //impossible
 * arr[0]=20 // possible
 * ex:
 * const n = 1;
 * n = 3; //impossible
 */
const arr = [25, 27, 29]
console.table(arr);
arr[0] = 20 // possible
console.table(arr);

arr.pop()
console.table(arr);
console.log("---------");

Intro Javascript

Rest et spread operators

08_rest_and_spread_operators.js

/**
 * Opérateur de rest:
 * const add = (...operandes) => a + b;
 * ou avec parametres avec valeur par défaut
 * const add = (a=0, b=0, ...operandes) => a + b;
 */

/**
 * spread opérateur:
 * récupère l'ensemble des elements d'une collection,
 * dans un array
 */
const user_ages = [25, 56, 12, 58, 41, 62, 26];

const max_user_age = Math.max(...user_ages);
const min_user_age = Math.min(...user_ages);

console.assert(max_user_age == 62);
console.assert(min_user_age == 12);

console.log("---------");

Intro Javascript

Destructuring

09_destructuring.js

/**
 * L'affectation par décomposition (destructuring)
 */

const user = {
    first_name: "@CCCP",
    last_name: ".education",
    nick_name: "@CCCP.education",
    gender: "male",
    is_adult: true
};
console.log(user);

//première façon d'initaliser des variables sans destructuration
let first_name_legacy = user.first_name;
let last_name_legacy = user.last_name;
let nick_name_legacy = user.nick_name;
let gender_legacy = user.gender;
let is_adult_legacy = user.is_adult;

console.assert("CCCP" === first_name_legacy);
console.assert(".education" === last_name_legacy);
console.assert("@CCCP.education" === nick_name_legacy);
console.assert("male" === gender_legacy);
console.assert(true === is_adult_legacy);
console.log("---------");
/**
 * Initialisation par déstructuration
 */
const {
    first_name,
    last_name,
    nick_name,
    gender,
    is_adult
} = user;

console.assert(user.first_name === first_name);
console.assert(user.last_name === last_name);
console.assert(user.nick_name === nick_name);
console.assert(user.gender === gender);
console.assert(user.is_adult === is_adult);

/**
 * Intialisation par déstructuration des arrays
 */
//cible explicite
const [a1, a2] = [15, 25, 17, 81, 51, 46];
console.assert(a1 === 15);
console.assert(a2 === 25);

//cible avec position par rapport aux index par virgules
//je veux b3 à 46
const [b1, b2, , , , b3] = [15, 25, 17, 81, 51, 46];
console.assert(b1 === 15);
console.assert(b2 === 25);
console.assert(b3 === 46);

//déstructuration avec operateur de rest
// je contruit un autre avec avec les elements
// à partir du premier élèment non destructuré
const [c1, c2, ...sub_arr] = [15, 25, 17, 81, 51, 46];
console.assert(b1 === 15);
console.assert(b2 === 25);
console.assert(sub_arr.length === 4);
console.assert(sub_arr[0] === 17);
console.assert(sub_arr[1] === 81);
console.assert(sub_arr[2] === 51);
console.assert(sub_arr[3] === 46);


// Une boucle pour comparer le resultat attendu
for (const [i, value] of[15, 25, 17, 81, 51, 46].entries()) {
    //on reconstruit le tableau à chaque iteration
    console.assert([c1, c2].concat(sub_arr)[i] === value);
}

Intro Javascript

Import et export de modules

10_module_import_export.js

/**
 * Import et export de module
 *
 * Dans le fichier html
 * au niveau de la balise d'import de script
 * spécifier le type module
 *
 * 1er technique: import nommé des fonctions:
 * import { sum, minus, times, div, rem } from "./dummy_math_functions.js";
 *
 * 2eme technique: import global des fonction avec l'asterisque(*)
 * en préfixant l'import par un nommage du fichier importé:
 * import * as math from "./dummy_math_functions.js";
 *
 * 3eme technique: import par alias avec le mot clé "as"
 * import {
 *     sum as add,
 *     minus as substract,
 *     times as multiply,
 *     div as divide,
 *     rem as modulo
 * } from "./dummy_math_functions.js";
 */

import {
    sum,
    minus,
    times,
    div,
    rem
} from "./dummy_math_functions.js";

console.assert(sum(1, 1) === 2);
console.assert(minus(4, 2) === 2);
console.assert(times(2, 2) === 4);
console.assert(div(4, 2) === 2);
console.assert(rem(4, 2) === 0);

dummy_math_functions.js

//sum
const sum = (x, y) => x + y;

// subtraction
const minus = (x, y) => x - y;

// multiplication
const times = (x, y) => x * y;

// division
const div = (x, y) => x / y;

// remainder: reste de la division euclidiene
const rem = (x, y) => x % y;

// log sum
const sum_log = (x, y) => console.log(sum(x, y));

// log subtraction
const minus_log = (x, y) => console.log(minus(x, y));

// log multiplication
const times_log = (x, y) => console.log(times(x, y));

// log division
const div_log = (x, y) => console.log(div(x, y));

// log remainder
const rem_log = (x, y) => console.log(rem(x, y));

export {
    sum,
    minus,
    times,
    div,
    rem,
    sum_log,
    minus_log,
    times_log,
    div_log,
    rem_log
};

Intro Javascript

Utilisation des classes

11_classes.js

/**
 * Utilisation des classes
 */
//creation d'un objet
class Account {
    constructor(username) {
        this.username = username;
    }
};

const acc1 = new Account("@CCCP.education");
console.table(acc1);
console.assert(acc1.username === "@CCCP.education");

console.log("---------");

//création d'un objet et ajout de getter et setter(accesseurs)
class AccountInfo {
    constructor(username) {
        this._username = username;
    }

    get username() {
        return this._username;
    }

    /**
     * @param {(arg0: string) => void} new_username
     */
    set new_username(new_username) {
        this._username = new_username;
    }
};

const acc_info1 = new AccountInfo("@CCCP.education");
console.table(acc_info1);
//accés au membre _username avec le getter username()
console.assert(acc_info1.username === "@CCCP.education");

//update la valeur username de acc_info1 avec le setter
acc_info1.new_username = "imrandeh";
console.assert(acc_info1.username === "imrandeh");

console.log("---------");

Intro Javascript

Mémo Kotlin

dim., 29 mai 2022 00:00:00 +0200

Good links

kotlinlang playground

arrow.kt

MVI:Model View Intent

Essenty

Decompose

Bout de code divers

map reduce

Convertir une list de bite vers une list de string et résumer la list de string
dans une string contenant la concatenation. Comment logger la request envoyé(requestBodyContent:byte[])

log.info(
    requestBodyContent!!.map { it.toInt().toChar().toString() }
        .reduce { request: String, s: String -> request + s }
)

enum et sealed classes

post: training kotlin enum sealed class

functionnal interface et method reference

On peut transformer une entité en model domain de dto avec un methode reference(functionnal style- java 8)

fun findAllByLoginNot(
        pageable:Pageable,
        login:String)
    :Page<UserDto> {
    return userDao.findAllByLoginNot(
                    pageable,
                    login).map(::fromEntity)
}

une bonne explication

Capturer la sortie standard

package functional

import java.io.ByteArrayOutputStream
import java.io.PrintStream
import java.lang.System.out
import java.lang.System.setOut
import kotlin.test.AfterTest
import kotlin.test.BeforeTest
import kotlin.test.Test
import kotlin.test.assertEquals


class BasicsHOF {
    private val standardOut: PrintStream? = out
    private val outputStreamCaptor = ByteArrayOutputStream()

    @BeforeTest
    fun setUp() = setOut(PrintStream(outputStreamCaptor))

    @AfterTest
    fun tearDown() = setOut(standardOut)

    @Test
    fun `three times dope`() {

        3.times { println("Hello") }

        assertEquals(
            buildString {
                repeat(3) { append("Hello\n") }
                deleteAt(length - 1)
            }, outputStreamCaptor
                .toString()
                .trim()
        )
    }

    fun Int.times(fn: () -> Unit) = (1..this).forEach { _ -> fn() }
}

Quelle est la différence en kotlin entre apply, run, let, also, use et with ?

Comparaison des fonctions Kotlin et Utilisation des Formes Lambda Reference

Introduction

Les fonctions Kotlin apply, run, let, also, use, et with offrent des moyens différents de traiter les objets. Chacune a ses propres cas d’utilisation et comportements. En outre, les formes lambda reference permettent de rendre le code plus lisible et réutilisable en faisant référence à des fonctions lambda existantes.

apply

La fonction apply est utilisée pour configurer un objet pendant sa création. Elle retourne l’objet sur lequel elle est appelée.