• Accueil /
  • Cours

    • Introduction et bases de JavaScript

    Technologie web 2

    Johan Girod

    Définition(s) du web

    Définition(s) du web

    Le World Wide Web — communément appelé WWW, W3, ou le web — est un système de pages web publiques interconnectées à travers l'Internet.
    MDN doc

    Définition(s) du web

    Le web est une application internet constitué d'un réseau de serveurs et de clients échangeant des ressources

    Schéma d'un échange entre client et serveur

    Définition(s) du web

    Le web est un ensemble de standards et protocoles

    Lesquels ?

    Le web est un ensemble de standards et protocoles

    • HTTP – protocole de communication client-serveur
    • HTML – structure et contenu
    • CSS – mise en forme
    • JavaScript – interactivité
    • ... et bien d'autres (WAI-ARIA, Browser API, WebAssembly, JSON...)

    L'organisation W3C définit les standards du web

    HTTP

    HyperText Transfer Protocol

    • Protocole de communication client-serveur
    • Utilise le protocole réseau TCP/IP
    • Un serveur HTTP utilise le port 80
    • Le client effectue une requête HTTP pour une ressource sur une URL
    • Le serveur répond avec un code de statut et un contenu

    En savoir plus

    HTML

    HyperText Markup Language

    Permet de structurer et de décrire le contenu d'une page web grâce à des balises

    CSS

    Cascading Style Sheets

    Permet de mettre en forme une page web grâce à des règles de style

    
body { background-color: #f0f0f0; }

    JavaScript

    Permet d'ajouter de l'interactivité à une page web

    
const button = document.querySelector('button');
button.addEventListener('click', () => alert('Hello world!'));

    Quelles sont les étapes pour afficher une page web ?

    1. Le navigateur fait une requête sur une URL du serveur avec le protocole HTTP
    2. Le serveur envoie une réponse qui contient code HTML de la page (et éventuellement du CSS et du JavaScript)
    3. Le navigateur interprète le code HTML, CSS et JavaScript pour afficher la page à l'écran

    Contenu du semestre

    Programmation en Javascript = 11 x 2h

    • Bases du langage
    • Manipulation du DOM
    • Gestion des événements
    • Utilisation des APIs du navigateur

    Evaluations

    • Deux évaluations sur machine
    • Durée : 1h30 (+ 30 min tiers temps)
    • Coeff 1

    Introduction à JavaScript

    Introduction à JavaScript

    • JavaScript (JS) est un langage de programmation interprété
    • Ubiquitaire dans le développement web (et au dela)
    • En constante évolution (standardisé par l'ECMA)

    Ressources

    Bases du langage

    Déclaration de variables

    
// Déclaration d'une variable
let maVariable = 12;

    Déclaration de variables

    
// Déclaration d'une variable
let maVariable = 12;

// Réaffectation d'une variable
maVariable = 42;

    Déclaration de constantes

    
// Déclaration d'une constante
const maConstante = 12;

    Déclaration de constantes

    
// Déclaration d'une constante
const maConstante = 12;

maConstante = 42; // Erreur
/* 
    À noter : si une variable n'est pas réaffectée, 
    il est préférable de la déclarer en constante
*/

    Types de données

    
				>

    Opérateurs

    Structures de contrôle

    Bloc logique et portée des variables

    Fonctions

    Déclaration de fonctions

    Déclaration de fonctions

    Scope des variables

    Variables locales

    Scope des variables

    Variables externes

    Valeur par défaut

    Fonctions fléchés

    Tableaux et objets

    Tableaux

    Itération sur un tableau

    Objets

    Itération sur un objet

    À vous de jouer !

    johangirod.com/cours

    Exercices / TP

    Pour effectuer les exercices, nous utiliserons un REPL (Read-Eval-Print-Loop) qui permet d’écrire du code et de l’exécuter directement.

    Le REPL JavaScript le plus répandu est celui de la console de votre navigateur. Pour y accéder, il suffit d’ouvrir le débugueur de votre navigateur (F12) et de cliquer sur l’onglet “Console”. Nous vous conseillons d’utiliser Firefox ou Chrome.

    Vous pouvez utiliser un fichier séparé pour faire les exercices et une trace de votre travail, et copier le code dans la console pour l’exécuter.

    Exercice 1

    Écrire une fonction qui, à partir de la hauteur d’un véhicule saisi par l’utilisateur, retourne la catégorie de tarification d’un véhicule se présentant au péage de l’autoroute :

    • hauteur inférieure à 2m : “véhicule léger”
    • hauteur supérieure ou égale à 2m et inférieure à 3m : “véhicule intermédiaire”
    • hauteur supérieure ou égale à 3m : “poids lourd”

    Tester cette fonction avec plusieurs hauteurs de véhicules.

    Solution

    Exercice 2

    Écrire un algorithme qui demande à l’utilisateur un nombre compris entre 1 et 10 jusqu’à ce que la réponse convienne.

    Vous pourrez utiliser la fonction prompt pour demander à l’utilisateur de saisir un nombre et la fonction alert pour afficher un message à l’utilisateur. 

    const guess = prompt("Entrez un nombre entre 1 et 10");
// ...
alert("Bravo !");

    Le nombre pourra être determiné aléatoirement à l’aide de la fonction Math.random et de la fonction Math.ceil.

    Vous aurez à utiliser la fonction parseInt pour convertir la chaîne de caractères saisie par l’utilisateur en nombre.

    Solution

    Exercice 3

    Écrire un programme capable de calculer la factorielle d’un nombre donné par l’utilisateur.

    Solution

    Exercice 4

    Écrire une fonction qui prend en paramètre un tableau de nombres et qui retourne la moyenne de ces nombres.

    Bonus : utilisez la fonction reduce pour calculer la somme des nombres du tableau.

    Solution

    Exercice 5

    Soit un tableau contenant la liste des couleurs:

    const couleurs = ["rouge", "vert", "bleu", "jaune", "orange", "violet", "rose", "marron", "gris", "noir", "blanc", "turquoise", "indigo", "beige", "fuchsia", "cyan", "corail", "chocolat", "bordeaux", "aquamarine", "auburn", "argent", "améthyste", "ambre", "émeraude", "ivoire", "lavande", "lilas", "magenta", "mauve", "olive", "or", "pourpre", "saumon", "sépia", "sienna", "tan", "turquoise", "vermillon", "violet", "zinzolin"];

    Écrire une fonction searchColor(query) qui prend en paramètre une chaîne de caractères et qui retourne un tableau contenant les couleurs qui contiennent la chaîne de caractères passée en paramètre.

    Vous pourrez utiliser les fonctions filter et includes pour résoudre cet exercice.

    Solution

    Exercice 6

    Plutôt que d’ouvrir systématiquement une popup pour chaque affichage nous allons maintenant utiliser la méthode write de l’objet document pour écrire directement dans la fenêtre du navigateur.

    Pour commencer, nous allons changer la police d’écriture pour une police monospace. Pour cela, nous allons utiliser la propriété fontFamily de l’objet document.body.style :

    document.body.style.fontFamily = "monospace";
    1. Écrire une fonction qui dessine une ligne d’étoiles * (le nb d’étoiles sera un paramètre).
    2. Écrire une fonction qui dessine un triangle composé d’étoiles, c’est-à-dire une succession de lignes d’étoiles de longueur 1 puis 2 puis 3 et ainsi jusqu’à n. Le passage à la ligne se fera à l’aide de la balise HTML adéquate (<br/>).
    3. Écrire une fonction qui dessine un carré de côté n, le bord de ce carré est composé d’étoiles, l’intérieur de « - ».
    4. Écrire une fonction qui dessine un losange creux, dont le bord est signifié par des étoiles. Chaque coté de ce losange sera donc dessiné avec n étoiles. Chaque « blanc » sera représenté par un espace non sécable encodé  . Par exemple, pour créer une ligne de 4 espace puis une étoile, on écrira : document.write(" ".repeat(4) + "*"); Voici le rendu pour n=4 : Un losange de 4 étoile de côté
    Solution