Scribd Logo
Importer

Bienvenue sur Scribd !

  • j14 Developpement Web Avec Javascript

    Transféré par

    カルマ
    9 vues5 pages
    Cours de développement Web avec javascript.

    Titre original

    j14-developpement-web-avec-javascript

    Copyright

    © © All Rights Reserved

    Formats disponibles

    PDF, TXT ou lisez en ligne sur Scribd

    Avez-vous trouvé ce document utile ?

    Ce contenu est-il inapproprié ?

    Signaler ce document
    Cours de développement Web avec javascript.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    9 vues5 pages

    j14 Developpement Web Avec Javascript

    Transféré par

    カルマ
    Cours de développement Web avec javascript.

    Droits d'auteur :

    © All Rights Reserved
    Téléchargez comme PDF, TXT ou lisez en ligne sur Scribd
    Signaler comme contenu inapproprié
    sur 5

    J14 - Développement Web avec JavaScript

    Journée du 6 Novembre 2023


    Document ressources sur le Javascript

    I. Le Javascript

    Histoire et Fondamentaux:

    Origine: Javascript a été introduit à la fin des années 1990 comme un moyen de rendre les pages
    web interactives. Il a été créé par Brendan Eich lorsqu'il travaillait pour Netscape Communications
    Corporation.
    Interprétation: Contrairement à des langages compilés comme le C ou le Java, le Javascript est
    interprété directement par le navigateur en temps réel.
    Distinction avec Java: Malgré une similitude dans le nom, le Javascript et le Java sont deux
    langages de programmation complètement différents tant par leur conception que par leur
    utilisation. Le Java est un langage de programmation orienté objet compilé tandis que le
    Javascript est principalement utilisé comme langage de script côté client.
    Flexibilité: Javascript est un langage très polyvalent qui peut être utilisé pour une variété de
    tâches allant de la simple validation de formulaire jusqu'au développement de jeux et applications
    web complexes.
    II. Programmer en Javascript

    Interaction avec HTML:

    DOM: Javascript permet de manipuler le Document Object Model (DOM), qui est une
    représentation structurée du document HTML. Il offre la possibilité de lire et de modifier le
    contenu, la structure et le style des éléments de la page.
    III. Les Variables en Javascript

    Déclaration et Typage:

    var: Ancienne méthode pour déclarer des variables, mais qui est remplacée dans les pratiques
    modernes par let et const en raison de leur portée (scope) plus contrôlable.
    Types de données: Javascript est un langage à typage dynamique. Vous pouvez donc déclarer
    des variables de différents types comme des chaînes de caractères (string), des nombres
    (number), des booléens (boolean), ou des tableaux (array).
    Exemples de déclarations de variables:
    var prenom = "Lawrence";
    var age = 30;
    var vieux = false; // Note: `false` est écrit avec une minuscule en Javascript

    var ingredients = ["Salade", "Tomate", "Oignon"];

    Bonnes Pratiques:

    Utilisation de let et const : Il est recommandé d'utiliser let pour les variables qui peuvent
    changer et const pour les variables dont la valeur ne changera pas.
    Noms des variables: Utilisez des noms de variables clairs et descriptifs pour rendre votre code
    plus lisible.
    Cas de faux: Attention à la casse, car False n'est pas reconnu en Javascript, la valeur correcte
    pour le booléen est false .

    Démonstration : Intégration de JavaScript dans le HTML et utilisation de base

    Pour intégrer et utiliser JavaScript dans un document HTML, suivez les étapes ci-dessous :

    1. Intégration du script JS dans le code HTML :

    Placez la balise <script> dans la section <head> ou juste avant la fermeture de la balise
    </body> de votre document HTML pour référencer le fichier JavaScript externe.

    <script type="text/javascript" src="js/script.js"></script>

    2. Script JS pour afficher les valeurs des variables dans la console du navigateur :

    Dans votre fichier script.js , vous pouvez écrire :

    // Déclarations et initialisations des variables

    var prenom = "Lawrence";


    var age = 30;
    var ingredients = ["Salade", "Tomate", "Oignon"];

    // Écrire dans la console

    console.log("Prénom :" + prenom);


    console.log("Age :" + age);
    console.log(ingredients[0]); // Affiche "Salade", à l'index 0 du tableau

    console.log(ingredients.length); // Affiche le nombre d'éléments dans le tableau

    console.log(ingredients[ingredients.length - 1]); // Affiche le dernier élément du


    tableau

    // Afficher une alerte sur la page

    alert("Prénom :" + prenom);


    alert("Age :" + age);
    alert("Prénom: " + prenom + ", Âge: " + age);
    3. Affichage d'une alerte avec conditions :

    Toujours dans le fichier script.js , vous pouvez ajouter :

    // Conditions

    if (age >= 30 && age < 40) {


    alert("Vous êtes presque vieux");
    } else if (age >= 40) {
    alert("Vous êtes vieux");
    } else {
    alert("Vous êtes jeune");
    }

    if (ingredients.length >= 5) {
    alert('Votre panier est rempli');
    } else {
    alert('Il y a de la place');
    }

    4. Utilisation des boucles :

    Pour afficher des valeurs avec une boucle for et une boucle forEach , ajoutez à votre script :

    // Boucle for de 0 à 4

    for (var i = 0; i < 5; i++) {


    console.log(i);
    }

    // Boucle forEach pour parcourir et afficher le contenu du tableau

    ingredients.forEach(function(element) {
    console.log(element);
    });

    Remarques :

    Assurez vous que le chemin vers le fichier JavaScript est correct.


    Utilisez let ou const au lieu de var pour une meilleure gestion de la portée des variables.
    Attention aux erreurs de syntaxe dans les appels console.log et alert , notamment l'oubli de
    + pour la concaténation et l'utilisation incorrecte des guillemets.
    Les messages d'alerte et de console doivent être informatifs et refléter correctement le contenu
    des variables et le résultat des conditions.

    Démonstration - Intégration du script dans le HTML :

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <h1 id="title">Mon site En HTML et Javascript</h1>
    <script src="js/script.js" type="text/javascript"></script> <!--On charge le script
    à la fin du body-->
    </body>
    </html>

    Placement du script : Le script est chargé juste avant la fin de la balise </body> , ce qui est une
    bonne pratique. Cela permet au navigateur de charger et de rendre tout le contenu HTML avant
    de commencer à exécuter le JavaScript, ce qui peut éviter des problèmes de référencement à des
    éléments qui n'auraient pas encore été chargés.

    Script JavaScript pour interagir avec les éléments HTML :

    // On récupère le premier élément h1 de la page


    var h1 = document.getElementsByTagName("h1")[0];

    // On vérifie que l'élément h1 existe


    if (typeof h1 !== "undefined") {
    // On affiche le texte de l'élément h1 dans la console
    console.log(h1.textContent);
    }

    Récupération d'éléments : document.getElementsByTagName("h1") retourne une


    HTMLCollection de tous les éléments <h1> présents dans le document. [0] permet de
    sélectionner le premier élément de cette collection.
    Vérification de l'existence : On vérifie si l'élément h1 existe avant d'essayer de l'utiliser pour
    éviter des erreurs dans le cas où aucun élément <h1> n'est trouvé.
    Affichage dans la console : h1.textContent est utilisé pour accéder au texte contenu dans
    l'élément h1 sélectionné, et console.log est utilisé pour afficher ce texte dans la console du
    navigateur.
    Intégration du CSS

    .bleu {
    color:blue;
    }

    var h1 = document.getElementsByTagName("h1");
    if (typeof h1 !== 'undefined') {
    h1[0].setAttribute('class', 'bleu');
    }

    Intégration d’une image

    <!DOCTYPE html>
    <html lang="fr">
    <head>
    <link rel="stylesheet" href="css/style.css">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
    <img>
    <script src="js/script.js" type="text/javascript"></script>
    </body>
    </html>

    var img = document.getElementsByTagName("img");


    if (typeof img !== 'undefined') {
    img[0].setAttribute('src', 'https://cdn.futura-sciences.com/sources/images/fusion-
    galaxies.jpeg');
    }

    Exercice - Faire une petite page, avec une image, Nom Prénom, Age, avec les informations
    uniquement affichées en javascript

    Vous aimerez peut-être aussi