Bienvenue, Invité
Nom d'utilisateur : Mot de passe :

SUJET : Initiation au javascript

Initiation au javascript il y a 7 ans 10 mois #46

  • eric.peronnin
  • Portrait de eric.peronnin
  • Hors Ligne
  • Karma: 7
Ce sujet n'est pas destiné à remplacer la multitude de tutoriaux que vous pouvez trouver sur le net.

Pour éditer les différents fichiers de ces exemples, je vous conseille d'utiliser l'éditeur de textes Sublime Text 3. Il n'est pas gratuit mais n'est pas limité dans le temps (il affiche juste un message toutes les x sauvegardes un peu à la manière de Winrar). Son avantage par rapport à Notepad++ : il automatise la frappe dans un certain nombre de langages et termine par exemple les balises de fermeture en HTML lorsque vous commencez à les saisir. Vraiment efficace.

C'est juste une petite aide pour démarrer, illustrée par différents versions d'un projet simple permettant d'effectuer divers calculs. Il vous permettra de tester votre propre fonction javascript.

Exemple1 :

Fichier attaché :

Nom du fichier : exemple1.rar
Taille du ficher :0 ko

Dans l'exemple 1, tout se fait dans une page html unique.

Quelques commentaires :
Les balises <h1> et <h2> sont des styles de titres. <br> permet de passer à la ligne.
La balise <input ...> permet de mettre un champ de saisie (ici de type text). La propriété id permet de donner un nom au champ de saisie pour pouvoir l'exploiter par la suite en javascript.
La balise <button ...> permet de mettre en place un bouton alors que la propriété onclick="....." permet d'associer une fonction au bouton qui sera exécutée lorsque le bouton sera cliqué (on met le nom de la fonction entre les doubles cotes).

Dans le code javascript :
var permet de déclarer une variable. Pas de besoin de préciser un type contrairement au C.
document.getElementById permet de récupérer un objet du document (la page html) en indiquant son id (l'exemple est assez clair). La propriété value permet en suite de connaître la valeur actuellement saisie dans le champ, si id est l'id d'un champ.
La fonction parseInt permet de convertir en entier l'information stockée dans une chaine de caractères (on n'extrait pas directement un entier à partir de la valeur d'un id obtenue avec la propriété value mais une chaine de caractères).
Les structures try et catch permettent de gérer les erreurs. Si une erreur apparaît dans la section try { ... }, son exécution s'arrête et le système bascule sur le traitement de la section catch.


Exemple 2 :

Fichier attaché :

Nom du fichier : exemple2.rar
Taille du ficher :1 ko

Cet exemple est une légère amélioration du premier juste pour vous montrer comment changer l'allure d'un élément en intégrant un fichier CSS (Cascading Style Sheet) dans lequel est créée une classe bouton qui sera ensuite appliquée au bouton de notre formulaire.
Pour plus de clarté, le code Javascript a également éré placé dans un autre fichier.

Dans l'entête, on a donc deux lignes pour importer les fichiers :
<link rel="stylesheet" href="./exemple2.css" type="text/css" />
<script src="./exemple2.js" type="text/javascript"></script>


Puis on utilise la classe "bouton" pour changer l'allure de notre bouton :
<button class="bouton" onclick="calcul()">Calculer A+B</button>

Si vous voulez tester des propriétés de style ou savoir comment certains éléments ont été faits sur des pages Web que vous consultez, il suffit sur un navigateur comme Firefox de choisir Examiner un élément dans le menu contextuel apparaissant à la suite d'un clic droit de la souris.
PS : c'est la méthode que j'utilise très souvent pour tester des styles puisqu'on peut en ajouter en même temps qu'on en inspecte.

Exemple 3 :

Fichier attaché :

Nom du fichier : exemple3.rar
Taille du ficher :1 ko

Cet exemple montre comment améliorer le style du bouton (changement du curseur quand on est sur le bouton avec la propriété css cursor ; changement de la couleur quand on est sur le bouton en utilisant l'attribut hover).
Vous y découvrirez aussi les boutons radios pour faire des choix de paramètres pour votre code javascript.
Il montre également d'autres structures du langage javascript :
- comment créer et utiliser un simple tableau de constantes,
- comment réaliser une boucle et utiliser une structure de type switch ... case ....
Vous pourrez constater les similitudes avec le C.
Dernière édition: il y a 7 ans 10 mois par eric.peronnin.
L'administrateur a désactivé l'accès en écriture pour le public.

Initiation au javascript il y a 7 ans 10 mois #47

  • martin.aubard
  • Portrait de martin.aubard
  • Hors Ligne
  • Karma: 0

Fichier attaché :

Nom du fichier : projet_1_anne.rar
Taille du ficher :1 ko
L'administrateur a désactivé l'accès en écriture pour le public.

Initiation au javascript il y a 7 ans 10 mois #48

  • eric.peronnin
  • Portrait de eric.peronnin
  • Hors Ligne
  • Karma: 7
Tu as écrit des document.getElementaryById au lieu de document.getElementById dans ton programme en javascript. A corriger partout et cela fonctionnera.

Il faut ensuite voir comment accumuler une succession de saisies différentes dans un tableau (voir fonction push en particulier pour les tableaux en javascript).
Dernière édition: il y a 7 ans 10 mois par eric.peronnin.
L'administrateur a désactivé l'accès en écriture pour le public.
Cet utilisateur a été remercié pour son message par: martin.aubard

Initiation au javascript il y a 7 ans 10 mois #50

  • eric.peronnin
  • Portrait de eric.peronnin
  • Hors Ligne
  • Karma: 7
Un exemple pour gérer le tableau des boissons, consommateurs et l'historique.

Fichier attaché :

Nom du fichier : exemple4.zip
Taille du ficher :2 ko
L'administrateur a désactivé l'accès en écriture pour le public.
Temps de génération de la page : 0.115 secondes