24 Javascript

Avant de passer à la réalisation de votre portfolio, jetez un coup d'œil rapide à javascript.

# Les limites du HTML et du CSS

Bien que vous ayez déjà pu construire pas mal de choses avec HTML et CSS, les capacités de ces deux langages sont limitées. Comme mentionné dans les bases, HTML et CSS ne sont pas de "vrais" langages de programmation. Le HTML sert de langage de balisage pour structurer un document web. Le CSS, en tant que feuille de style, est responsable du style des éléments HTML. Dès que vous voulez réagir aux interactions et aux entrées (formulaires) de l'utilisateur, charger des données du serveur en arrière-plan ou calculer des opérations mathématiques et logiques, le HTML et le CSS atteignent leurs limites.

À cette fin, les développeurs web utilisent généralement Javascript. Bien entendu, il existe de nombreux autres langages de programmation utilisés en particulier du côté serveur (Python, C#, PHP, Go, Rust, etc.). Le Javascript est le langage le plus utilisé sur le web et actuellement le seul qui peut être utilisé à la fois comme language serveur (NodeJS ) et client (dans votre navigateur).

En pratique, plus de 99 % des navigateurs actuels peuvent gérer Javascript et l'activer. Néanmoins, il y a des exceptions. Par exemple, les grandes plateformes comme Amazon doivent partir du principe que leur site web sera accessible même sur de très vieux navigateurs et ordinateurs. Comme Amazon veut toujours vendre quelque chose partout, le site doit fonctionner complètement sans Javascript au cas où celui-ci ne serait pas disponible sur le visiteur. En outre, les systèmes informatiques de nombreuses entreprises ne disposent souvent pas de mises à jour pendant des années, car les navigateurs doivent souvent s'intégrer à d'autres systèmes en place.

En principe, c'est donc une bonne chose si un site web fonctionne sans Javascript. Toutefois, cela n'est pas toujours possible ou entraînerait des coûts supplémentaires considérables. Les fournisseurs tels que Google Maps sont strictement opposés à l'abandon de Javascript et ne fournissent simplement rien à l'utilisateur si Javascript est désactivé dans le navigateur.

Google Maps sans JS

Les sites web simples, comme votre portfolio, peuvent se passer de langages de script dynamiques. Cependant, dès qu'il y a beaucoup de données et beaucoup d'interaction avec l'utilisateur, le HTML et le CSS statiques ne suffisent plus à eux seuls.

:hand: Tâches

Recherchez des exemples ou des graphiques qui illustre les limites du HTML et du CSS à la classe. Collez vos liens et exemples dans ce document Google

# Principes de base de Javascript

Il existe une grande quantité de principes et de concepts liés au javascript. Ils sont trop nombreux pour les couvrir tous dans ce cours. C'est pourquoi vous n'apprendrez que les plus importants. Vous trouverez ci-dessous les liens appropriés si vous souhaitez apprendre Javascript par vous-même.

:memo: Note

Bien que Java et Javascript partagent de nombreux principes et portent un nom similaire, ils ne sont pas identiques ! Java est principalement utilisé pour Android et les logiciels de bureau. Le JavaScript a été développé beaucoup plus tard pour l'utilisation des navigateurs. On pense que le nom similaire a été créé suite à une décision marketing de la société Mozilla pour capitaliser sur la popularité de Java.

# Datatypes (types de données)

Pour qu'un langage de programmation puisse traiter efficacement les données, il doit savoir quel type de données il doit traiter. Javascript fait la distinction entre les "Primitives" (types de données primitives) et les "Objets" (objets).

    // Primitifs
    
    0; // nombre
    "Bonjour, je suis Jane" // chaîne (texte entre guillemets)
    true; // booléen (fausse valeur)
    false; // booléen (valeur correcte)

    undefined; // valeur inexistante
    null; // valeur existante mais vide
    

    // Objets
    
    // objet (objet avec des objets subordonnés ou des primitives)
    janeObject = { 
        nom: "Doe",
        profession: "Concepteur de médias interactifs".
    }
    
    // Tableau liste d'objets ou de primitives séparés par des virgules)
    janeArray = ["Jane Doe", "Interactive Media Designer", 2020]
    
    // Fonction fonction qui calcule, exécute et/ou renvoie des valeurs)
    fonction calculate() {
        retour 1 * 2;
    }

# Opérateurs.

Comme dans la plupart des langages de programmation, Javascript comporte de nombreux concepts mathématiques, de l'algèbre et de la logique. Par exemple, vous pouvez attribuer des valeurs (nombres, texte, etc.) à une variable, puis utiliser cette variable dans une équation, ou fixer des conditions pour le calcul.

    // Opérateurs d'affectation
    
    const a = 10; // variable immuable
    let b = 5; // variable modifiable
    
    // Opérateurs arithmétiques (Arithmetic Operators)
    
    a + b; // addition, résultat: 15
    a - b; // soustraire , résultat: 5
    a * b; // multiplier , résultat: 50
    a / b; // diviser , résultat: 2
    a % b; // reste/modulo (combien de fois b entre dans a et ce qui reste), résultat: 0
    
    // Opérateurs de comparaison
    
    a === b; // a et b sont-ils identiques ? Résultat: vrai
    a !== b; // a et b ne sont-ils PAS identiques ? Résultat: vrai
    a > b; // a est-il supérieur à b ? Résultat: vrai
    a < b; // Est-ce que a est plus petit que b ? Résultat: faux
    a <= b; // Est-ce que a est inférieur ou égal à b ? Résultat: faux
    a || b; // a ou b n'est pas faux ? Résultat: vrai
    a &&& b; // a et b ne sont-ils pas faux ? Résultat: vrai

Les mathématiques en Javascript

Avec Javascript, vous pouvez calculer beaucoup plus. Avec l'objet "Math", vous pouvez calculer un nombre entre un minimum et un maximum. Comme vous l'avez déjà fait dans le CSS pour le "font-size".

Mozilla - Tout le monde aime les mathématiques

# Boucles (boucles)

Les boucles sont un outil puissant pour résoudre les tâches de programmation répétitives. Supposons que vous ayez une liste de 10 000 entrées. Il serait très lourd et inefficace de traiter toutes les entrées individuellement dans votre code. Vous utiliserez plutôt une boucle qui exécute le code que vous définissez pour chaque entrée de la liste.

    const a = [1,2,3,4, ... ,10000];
    
    a.forEach((currentValue, currentIndex) => {
        return 'The loop is currently at position: ' + currentIndex + ' and has value:' + currentValue;
    })

Note sur la syntaxe

Toutes les parenthèses [], (), {}, le point-virgule ; et aussi la flèche => appartiennent à la syntaxe du Javascript. Elle permet de déterminer quelle commande commence ou où elle se termine. Si vous souhaitez apprendre Javascript en détail, vous trouverez ci-dessous des liens vers des tutoriels et de la documentation.

# Événements (Événements)

Chaque interaction d'un visiteur sur votre site web déclenche ce que l'on appelle des événements. Vous pouvez réagir à ces événements en Javascript. Par exemple, vous pourriez afficher un message pour chaque "clic" qu'un utilisateur fait quelque part sur votre site.

    document.addEventListener('click', (event) => {
        alerte ("Bonjour visiteur, vous avez cliqué quelque part !")
    });

🔗 Liens connexes

Mediaevent - Evénements Javascript

# Conditions

De nombreux programmes ne font des choses que lorsque certaines conditions sont remplies. Par exemple, vous ne pouvez pas soumettre un formulaire si l'adresse électronique est mal saisie. Ou vous ne pouvez pas vous connecter si le mot de passe que vous avez saisi est erroné. En Javascript, vous pouvez utiliser des conditions pour définir quand le code doit être exécuté.

    if(a > b) {
        return vrai;
    } else {
        return faux;
    }

En combinaison avec les opérateurs de comparaison mentionnés précédemment, vous pouvez l'utiliser pour créer des requêtes complexes et des séquences logiques. Vous pouvez également enchainer plusieurs conditions.

    if(a > b && a % b === 0) {
        répondre "Oui, a est supérieur à b ET le reste de a % b est 0";
} else if(a > b || a !== b) {
        répondre "Oui, a est supérieur à b OU a n'est pas identique à b";
    } else {
        retourner "Aucune de ces réponses n'est vraie";
    }

⚒️Tâches

Faites des recherches (exemples, graphique) afin de pouvoir présenter clairement à la classe les principes de base du javascript. Collez vos liens et exemples dans ce document Google

24. Utilisez Javascript

Maintenant que vous avez appris les principes de base du javascript, apprenez à l'utiliser dans votre portfolio.

# Intégrer le javascript pré-écrit

Même les programmeurs expérimentés n'écrivent pas tout le code eux-mêmes. Ils ont souvent recours à des bibliothèques (code libraries) ou à des snippets (morceaux de code pré-construits). La plupart des bibliothèques, ainsi que les fichiers Javascript individuels, peuvent être intégrés dans un fichier HTML de la même manière qu'un fichier CSS.

    <!-- insérer dans index.html avant la balise de fermeture du body -->
    
    <!-- charger un fichier javascript à partir d'une source externe -->
    <script src="https://javascript.com/library.js"></script>
    
    <!-- Charger un fichier javascript depuis un dossier de votre site web -->
    <script src="js/library.js"></script>

Trouver des bibliothèques et des snippets

Voici quelques liens utiles où vous pouvez trouver des codes et des snippets.

• Codepen (communauté frontale avec de nombreux exemples de codes).

• Codrops (exemples de frontaux avec code)

• Glitch (Communauté de codage collaboratif)

• Stackoverflow (le plus grand forum de codage au monde)

• Github (la plus grande plateforme de codage au monde avec de nombreux projets publics)

# Écrire Javascript soi-même

Une bibliothèque seule ne fait souvent rien. Vous devez lui dire en javascript ce qu'il faut faire sur votre site web. Bien entendu, cela s'applique également à tout autre javascript qui doit être intégré indépendamment des bibliothèques ou des snippets. Vous pouvez soit écrire du Javascript directement à l'intérieur d'une balise "script" dans votre HTML, soit l'externaliser dans un fichier "js" séparé, que vous intégrerez ensuite comme décrit précédemment.

    <script>
        // Afficher la date complète avec l'heure sur la console du navigateur au chargement de la page.
        console.log( new Date() );
    </script>

:memo: Note

L'écriture de javascript "inline", c'est-à-dire directement dans le HTML, n'a de sens que dans très peu de cas. Utilisez un fichier .js séparé chaque fois que cela est possible.

Autres 🔗 Liens

Date/Heure en Javascript

# Apprendre le Javascript

Apprendre le Javascript

• DEV.to (Magazine communautaire gratuit pour les développeurs)

• Freecodecamp (Tutoriels et défis gratuits)

• Scotch.io (tutoriels partiellement gratuits)

• Codecademy (tutoriels en ligne de qualité, partiellement gratuits)

• SuperHi (Coaching en ligne payant)

Vous pouvez également trouver d'autres liens et ressources recommandés dans le chapitre Lectures complémentaires à la fin de ce cour.

Relever les défis

• #22 Dynamic Date (Ajouter l'année en cours dans le pied de page, qui change dynamiquement chaque année).

• #23 Bonjour dynamique (Accueillir les visiteurs du site web selon l'heure de la journée)

• #24 Lazyloading Images (Ne charge les images que lorsqu'elles entrent dans la fenêtre de visualisation)

• #21 Click Events (Remplacer une image du portfolio une fois qu'elle a été cliquée)

• #29 Likes (Laissez les visiteurs "aimer" les messages sur votre site web. Veillez à ce que ces préférences soient enregistrées et additionnées)