progelem

Prog’élem

Variable de type objet - Théorie :

C'est une variable qui possède un ensemble de valeurs (propriétés) et un ensemble de fonctions qui lui sont propres (méthodes).

Par exemple, l'objet 'maVoiture' a des propriétés :

  • Marque
  • Modele     (Pas de caractères spéciaux, accentués, etc)
  • Couleur
  • Poids_tc  (Pas d'espaces. Ici, ils sont remplacés par '_')
  • Date_de_construction
  • etc

... et des méthodes :

  • Demarrer()
  • Accelerer()
  • Avancer()
  • Ouvrir_portiere()
  • etc

Pour connaître la couleur de maVoiture, la syntaxe à utiliser est : maVoiture.couleur

Pour créer un objet, il faut utiliser un modèle (on appelle celà 'une classe'), par exemple, la classe 'Voiture'.

Note : Ne pas confondre 'classe d'un objet' avec 'classe d'un élément html' (attribut 'class')

maVoiture = new Voiture()
maVoiture.Marque = 'Ford'
maVoiture.Modele = 'Taunus'
maVoiture.Couleur = 'bleu clair'      (Les valeurs d'attributs peuvent avoir des espaces, des caractères spéciaux, accentués, ...)
maVoiture.Poids_tc = 1120    (Cette propriété est de type numérique)

VoitureDeJean = new Voiture()
VoitureDeJean.Marque = 'Fiat'
VoitureDeJean.Modele = '600'
VoitureDeJean.Couleur = 'rouge'
VoitureDeJean.Poids_tc = 710

Si la classe 'Voiture' n'existe pas, il faudra la créer au préalable, sous peine d'erreur.
La création d'une classe fera l'objet d'un autre cours.

Le langage javaScript possède déjà quelques objets 'prêts à l'emploi', tel que 'windows', 'Math', etc.


Variable de type objet - Exemples :

  • window.innerWidth retourne la largeur d'affichage du navigateur, en pixels.
  • Math.random() retourne un nombre décimal aléatoire dans [0, 1[  (0 inclus, 1 non inclus - jusqu'à 16 décimales).
  • Math.round(4.251447) retourne la valeur arrondie du nombre 4.251447, c'est à dire 4.
  • navigator.userAgent() retourne les caractéristiques du navigateur utilisé par l'internaute.
  • history.back() demande au navigateur d'afficher la page précédente.

La bibliothèque jQuery :

Le signe $ est le nom de la fonction jQuery, définie dans le fichier jQuery.js chargé dans la page html.

$(<Sélecteur html>) retourne un objet que l'on peut ensuite utiliser. On pourra :

  • Lire ses propriétés.
  • Exécuter ses méthodes.

$('.rectangle').width()      retourne la largeur (en pixels) de l'élément html ayant pour classe 'rectangle' (Notez le point devant).
$('#boite').height()      retourne la hauteur (en pixels) de l'élément html ayant pour id 'boite' (Notez le #).
$('#boite').click ->       La fonction ( Le code qui suit -> ) sera exécutée lorsque l'événement 'clic' sur l'élément '#boite' intervient.


Les fonctions :

Avant d'utiliser une fonction, il faut s'assurer qu'elle existe. Sinon, il faudra la créer.

Exemple : On crée la fonction 'age', puis on s'en sert à la dernière ligne (alert ...)

age = (naiss) ->
    d = new Date()
    now = d.getFullYear()
    now - naiss
alert "Vous avez " + age 1981 + " ans."

Explication :

La dernière ligne contient : age 1981, ce qui signifie "Donnes-moi l'âge d'une personne née en 1981".
Elle fait appel à la fonction 'age' qui s'occupe de faire le calcul, c'est son travail.
La plupart du temps, on utilise des fonctions sans s'occuper de la manière dont elles trouvent le résultat attendu.

Dans notre cas, la fonction 'age' doit exister : ce sont les 4 premières lignes.

L'appel de la fonction 'age 1981' contient le nom de la fonction (age) et un attribut (1981) qui peut être différent à chaque appel.

La déclaration de la fonction 'age = (naiss) ->' contient son nom (age) et les paramètres attendus sous forme de variables (naiss)
Il peut y avoir plusieurs paramètres attendus : ils sont alors séparés par une virgule.

Le repos du programmeur : Il existe en téléchargement libre des milliers, voire des millions de fonctions toutes faites de la plus simple (par exemple surface d'un cercle en fonction de son diamètre) à la plus complexe (défilement d'images, jeux complets, etc).

Ces fonctions sont souvent groupées dans un package appelé 'librairies', 'framework' ou 'API'.
Tout programmeur peut créer ses librairies privées, qui s'enrichiront tout au long de sa vie professionnelle.

jQuery est le framework le plus utilisé au monde actuellement.


Pratique :

L'exercice qui suit demande quelques connaissances supplémentaires :

1 - Nombre aléatoire

a) x = Math.random()       Si vous affichez x vous verrez un nombre décimal (jusqu'à 16 décimales) aléatoire compris entre 0 et 0.9999999999999999

b) x = 60 * Math.random()    x sera compris entre 0 et 59.9999999999999999

c) x = Math.floor x                  arrondi à la valeur inférieure : x sera un nombre entier compris entre 0 et 59

d) x = x + 30                            x de maintenant est égal au x d'avant auquel on a ajouté 30. x est compris entre 30 et 89
Note importante : en mathématiques ceci est une erreur ... en effet cela signifierait que  ... 30 = 0 !!!
En programmation, et quel que soit le langage, un équation fait toujours intervenir le temps, cad la notion d'avant et de maintenant.

Conclusion : pour obtenir un nombre entier tiré au hasard entre 30 et 89, il aura fallu 4 lignes de code :
On part de la ligne a) pour obtenir le résultat final en d) : Les lignes b) et c) sont des résultats intermédiaires.
Avec un peu d'habitude on pourrait écrire une seule ligne de code ... mais qui serait plus compliquée à comprendre.

x = 30 + Math.floor 60 * Math.random()

2 - La fonction css de jQuery

jQuery peut remplacer le css pour donner du style aux balises html
$('#boite').css 'width', '540px'           équivalent css ->   width: 540px;

Lorsqu'il y a plusieurs propriétés à affecter, on les groupe dans un objet :

$('#boite').css
    'color': '#f00'
    'height': '200px'
    'width': '540px'

Respecter les apostrophes, les 2 points (:) et pas de point-virgule final.

On peut connaitre par exemple la largeur de l'élément '#boite', comme ceci :

largeur = $('#boite').css 'width'


Application :

Programmez ce jeu dans un nouveau projet, nommé 'Jeu1', placé dans exe003\jeu1

Étapes :

Il est nécessaire de faire ce qui suit pas à pas et d'observer le résultat dans un navigateur au fur et à mesure.
C'est cette observation dans le navigateur qui permettra de valider et ainsi de passer à l'étape suivante.

  1. Fichier slim :
    1. Sous le titre, placez la question en h4 : Voulez vous une augmentation de salaire de 10% ?
    2. Créer 2 boutons :
      1. Le premier a pour libellé 'Non' et pour classe 'non'
      2. Le deuxième a pour libellé 'Oui' et pour classe 'oui'
  2. Fichier css :
    1. Tout centrer dans le body.
    2. Les boutons :
      1. Changer le curseur-souris (une main).
      2. Marge du haut de 150px pour bien les séparer du haut.
      3. Placer le bouton 'Oui' en position relative

        Un élément à l'affichage n'est déplaçable que s'il est en position absolute ou relative.
        Absolute = Positionné par rapport au 1er parent qui est en position relative ou absolute.
        Relative = Positionné par rapport à lui-même, à sa position par défaut.

      4. Fixer les valeurs de left et top à 0 (Position de départ)

        Sinon le jeu fonctionne sous Firefox mais pas sous Chrome ni Internet Explorer.

  3. Fichier coffeeScript :
    1. Attendre que tous les codes soient chargés dans le navigateur (html + css + js)

      Rappel : à ce moment là l'événement $(window).load intervient.

    2. Déclarer une fonction qui sera exécutée sur l'événement 'clic' sur le bouton 'Non'. Cette fonction :
      1. Affiche une boite de dialogue (Alert) : Bravo ! Vous êtes un employé modèle .... etc.
      2. Modifie la question du haut : Voulez-vous une autre augmentation de 10% ?
      3. Modifie aussi sa couleur : passe en rouge.
      4. Replace le bouton 'Oui' qui a bougé à sa position d'origine : x=0, y=0
    3. Déclarer une deuxième fonction qui sera exécuté lorsque la souris survole le bouton 'Oui'

      Attention, l'événement n'est pas 'click' (on ne clique pas), mais 'mouseover' (Souris au dessus).
      Cette fonction :

      1. Crée un nombre au hasard pour le déplacement horizontal du bouton : [-129, -30] et [+30, +129]
      2. Ajoute cette valeur à la position horizontale actuelle du bouton 'Oui' : Celui-ci va bouger horizontalement.
      3. Crée un nombre au hasard pour le déplacement vertical du bouton : [-119, -20] et [+20, +119]
      4. Ajoute cette valeur à la position verticale actuelle du bouton 'Oui' : Celui-ci va bouger verticalement.

 

0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *