Bonjour à tous,

État de la situation :

Je possède trois fichiers sur mon ordinateur, l'un HTML, les deux autres JS. Je les ais vérifiés, ils sont sans erreur. J'ai installé quelques extensions de VS Code pour Chrome et Firefox.

Le problème :

Quand j'appuie sur le bouton rectangulaire bleu "Run and Debug", le navigateur m'affiche "Erreur de connexion", alors que je suis bien connecté à mon réseau wifi. VS Code me demande d'ouvrir les configurations de navigateur dans "launch.json". Je m'exécute en y ajoutant les configurations de Chrome, mais quand je "Run and Debug" de nouveau, la page est cette fois-ci totalement vierge. D'ailleurs, le bouton bleu a disparu, je suis obligé d'utiliser cette fonctionnalité dans la barre de menu, en haut.

Quelqu'un pour m'aider, s'il vous plaît ?

Bonjour,

>> J'ai installé quelques extensions de VS Code pour Chrome et Firefox.

Lesquelles? Pourquoi des extensions de VSCode pour certain navigateur?

Ce ne serait pas un live serveur que tu souhaiterais avoir? Voir :

• https://www.youtube.com/watch?v=oXvNYHgsX0g
• https://www.youtube.com/watch?v=w65jd0Vyj_w

Merci pour votre réponse, je crois que c'est ce qu'il faut.

Si j'ai bien compris, un live server est un serveur local qui peut ouvrir les pages web dans n'importe quel navigateur ?

DragenSanguinar a écrit:

Si j'ai bien compris, un live server est un serveur local qui peut ouvrir les pages web dans n'importe quel navigateur ?

Oui, avec en moins les problèmes de CORS.

Bonsoir,

La je pense que c'est plus un problème de JS que de l'éditeur lui même. Que dit la console du navigateur? Pour quelles raisons ouvrir le fichier html en cliquant dessus? Vous ne devez pas avoir file://c: dans l’URL du navigateur mais bien localhost suivis d'un numéro de port. Vous n'avez pas lancer le live serveur. 

Autre problème ou se situe le répertoire node_modules?? Il devrait se trouver dans le répertoire de votre site/app. On ne le voit pas dans la hiérarchie de vos fichiers.  Si vous utiliser une bibliothèque JS il faut l'installer en local avant d'en faire appel.(un npm instal peut être.... )

PS: Je n'utilise pas le type="text/babel"  mais j'imagine que cela fonctionne comme un module.

Qu'est-ce qu'un "node_module" ? Pourriez-vous m'expliquer ?

Autre chose :j'arrive à ouvrir sur un autre ordinateur une autre page web mais seulement dans Edge. Bizzare (peut-être parce que j'utilise un ordinateur Windows)...

Quand j'essaye de l'afficher dans Firefox, il affiche :

-
Edité par DragenSanguinar 29 décembre 2024 à 21:43:07

Bonsoir, vous ne semblez pas avoir les bases en JS pour vous attaquer à un framework utiliser une bibliothèque tel que react. Quel est le cours que vous suivez?

>> Qu'est-ce qu'un "node_module" ? Pourriez-vous m'expliquer ?

C'est le dossier ou se trouve les différents module que vous installer pour votre projet. Il contient également les dépendance des modules utilisé.

Voir https://www.youtube.com/watch?v=nkp_xhM0L0s pour plus d'info. Je vous recommande de suivre la formations JavaScript de grafikart  pour avoir les bases en JS avant d'utiliser un framework.

Au vu de votre capture d'écran, vous n'utiliser pas le live serveur. Pour pouvoir utiliser localhost dans l'url du navigateur il faut au préalable lancer un serveur local. C'est ce que fait l’extension go live de visual studio code. Quand vous cliquer sur le bouton "go live" VSC lance un serveur de développement local et devrait vous ouvrir la page à une adresse de type localhost:4545/index.html (cette adresse est un exemple car je n'utilise pas cette extension pour l'instant.)

Est-ce plus clair sur le fonctionnement? Vraiment suivez un cours. Et  TOUJOURS ouvrir la console du navigateur quand on développe en JS.

Édit :

>> Qu'est-ce qu'un "node_module" ? Pourriez-vous m'expliquer ?

Un article qui me semble intéressant pour vous :

https://www.digitalocean.com/community/tutorials/how-to-use-node-js-modules-with-npm-and-package-json-fr

 Édit2 : Grace à vous j'ai trouvé là lire : https://la-cascade.io/articles/npm-guide-6-package-installer-paquets

Ceci parait plus adapté au débutant que le lien précédant.  (je garde ce lien pour plus tard )

édit 3 : Erreur de ma part, en parlant de framework React, c'est une bibliothèque.

-
Edité par AbcAbc6 30 décembre 2024 à 5:42:42

Bonjour, après avoir lu le guide pour débutant sur le site la-cascade.io, avez vous des questions? Est-ce plus clair pour l'usage du code que vous souhaitez utiliser?

Ou avez vous besoin d'un exemple dirigé pour l’installation de node, l'utilisation d'une librairie dans le répertoire node_modules? 

Bonne année 2025, quelle soit remplie de plein de nouveau apprentissage .

Bonne année 2025 !!!!!

Merci pour les liens, ça m'a beaucoup aidé. Tout s'est affiché comme il faut, même en utilisant React. Mais après avoir supprimé le package.json (pour tester) l'affichage était toujours dans la page. Son utilité se limite alors simplement pour des informations supplémentaires pour le site ? Et un node_module est ce package.json ou le fichier node.js que j'ai installé ?

>>Ou avez vous besoin d'un exemple dirigé pour l’installation de node, l'utilisation d'une librairie dans le répertoire node_modules?

Ce n'est pas incontournable, mais j'aimerais bien, merci !

J'apprends aussi un peu le PowerShell, et je connais quelques commandes. La seule chose qui m'agace un peu sur les sites que vous m'avez fourni, c'est que leurs éditeurs, au lieu d'utiliser les commandes complètes, utilisent les alias (abrégés de commandes). C'est quand même plus difficile de retenir "npm" ou "mkdir" que Node-Package-Manager (en complet). Mais bon, on va y arriver... 

-
Edité par DragenSanguinar 1 janvier 2025 à 18:30:10

Bonsoir,

>> Ce n'est pas incontournable, mais j'aimerais bien, merci !

Oups désolé pour la réponse tardive, les fêtes + dépannage d’un ordinateur + différents  projets = moins de temps cette dernière semaine pour répondre sur le forum.

Bien je vous propose de créer un projet pour vous familiarisé avec node_modules.

Comme nous allons utiliser des commandes (npm) nous devons d’abord nous assurer de la bonne compréhension de cette commande par notre terminal.

Cela passe par l’installation d’un environnement node. Si ce n’est déjà fait rendez -vous sur le site de node pour télécharger et installer node https://nodejs.org/fr/download  cliquer sur le bouton vert (.msi)

Une fois installer, nous pouvons vérifier dans le terminal de votre choix (celui de VSC ou de Windows) la version de cellui-ci en entrant :

node -v     

Faisons de même pour la commande npm

npm -v

Un numéro de version apparait cela veux dire que la commande est opérationnel.

Maintenant que nous avons les outil en place, créer un répertoire dans votre répertoire de  projets. Je vous propose de le nommer « canvas-confetti » du nom du module que vous allez installer. Ouvrez ce répertoire avec Visual Studio Code puis dans le terminal (de VSC ou celui de votre choix) taper la commande :

npm install --save canvas-confetti

Le fait d’installer un projet tiers, crée le répertoire node_modules avec dedans le contenu du module et ses dépendances si il y en a.

Vous ne modifierez jamais le contenu de ce répertoire, comme il n’est pas à mettre sur un dépôt github, gitlab ou autre. Si vous le désirez vous pouvez ouvrir le répertoire node_modules pour y lire le fichier README.md du module installer pour avoir des exemples d’utilisation.

 Créer un répertoire js à la racine puis un fichier script.js avec dedans :

// js\script.js

confetti({
    particleCount: 100,
    spread: 70,
    origin: { y: 0.6 }
});

Puis un fichier index.html à la racine avec dedans : 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Canvas Confetti</title>
    <script src="node_modules/canvas-confetti/dist/confetti.browser.js"></script>
    <script src="js/script.js" defer></script>
</head>
<body>
    
</body>
</html>

Comme vous le constatez dans le HTML je ne fait que lier le fichier JS du module et le fichier JS qui utilise ce module.

Vous pouvez ouvrir le fichier HTML en double cliquant dessus au départ de l’explorateur de fichier et vous verrez dans le navigateur un jet de confetti.  
Vous devriez avoir la structure hiérarchique suivante :

Vous trouverez sur ce site https://www.npmjs.com  l’ensemble des librairies que vous pouvez utilisez via npm. Celle que vous avez installé https://www.npmjs.com/package/canvas-confetti  ou vous retrouvez différentes information d’utilisation, de paramétrage, lien de démo etc…

Je vous propose de rechercher une librairie de votre choix sur le site npmjs.com, de l’installer et de l’utiliser pour vous exercer.