Filtre CSS

Css permet d'ajouter un filtre qui feutre l'opacité d'une image. Le code ci-haut retourne l'image à sa clarté originale à la visite de la souris. A noter que le code d'opacité est double,opacité décimale pour Opera et Cie, opacité pourcentage pour IE.

Initialer

Viva Deitel

Imprimer

L'exemple ci-dessus nous montre qu'il est bien facile de placer une commande imprimer avec Javascript; ça fonctionne aussi avec les méchanismes habituels tels que button. (En principe, on affiche les commandes imprimer: pour l'exemple, il n'y a pas d'imprimante sur mon portable).

Je me suis permis de tout mettre dans l'en tête du document. En fait, séparer avec body n'est qu' une convention d'écriture pour les éléments visuels. Pour Javascript, un programme dans body devient du 'inline scripting':c'est à suivre...

Frames

À noter: pour réussir une page avec frameset, il faut un DOCTYPE particulier. Les différents'frames' se découpent selon la consigne col pour les colonnes ou rows pour les rangées.On peut spécifier si l'on désire des barres de défilement, mais différents navigateurs réagissent selon leurs programmes par défaut. Ici, Opéra centre l'image Fraise. Il faut surveiller. La mise en page frameset n'est pas toujours populaire, car chaque frame accepte la consigne de copier la page individuellement.

Version IE(8)

B&B(Safari)

Le petit exemple ci-dessus illustre l’utilisation des identificateurs du CSS. Le id se déclare par un # dans l’en-tête et sert à définir un élément distinctif. Le class sert souvent à répétition, et se marque par un point, suivi d’un nom évocateur.

L’exemple montre aussi que l’on peut faire de la mise en page avec des div. Mais attention: les moniteurs des internautes sont de largeurs différentes et tout fixer peut donner de mauvais résultats pour certains. Pour notre exemple, un internaute avec un très grand moniteur verrait un petit site tout à gauche de son écran.

C’est d’ailleurs la règle à respecter en design pro: il faut laisser des éléments qui s’ajustent.

Centré

Focus

Ce petit programme, glané dur le Net, rappelle au visiteur qu’il doit remplir le champ Nom d’un formulaire. Il se sert de la notion de focus, c’est-à-dire de l’endroit sur la page où le curseur clignotte. Si on met le curseur ailleurs que dans la boïte - et le champ est vide - l’alerte se déclenche.

Aspect intéressant, le programme met la fonction javascript dans le body, à la suite du formulaire. Ceci a pour conséquence que le champ Nom reçoit le focus à l’ouverture de la page et que la fonction est appelée on blur, c’est-à-dire, à l’éloignement. La fonction se déclenche également dans le cas ‘usuel’ mais sans focus initial, c’est moins clair.

http://actuel.fr.selfhtml.org/archives/docu/7.0/selfhtml.htm

Pour IE

Il y a deux façons de faire alors que le HTML est maintenant dynamique: DHTML. Le script de la ligne 14 va démarrer au clic sur l'objet paragraphe grace à son id, c'est à dire son identificateur unique. Le deuxième scénario va démarrer par le biais d'un objet button, avec attribut onclick aux lignes 25,26, sans mention de Javascript. (Javascript n'est qu' une implémentation conforme du standard.)

Source: Deitel, HOW TO PROGRAM, 2000.

Le roi

Avis

Click'N Count

La première petite fonction, qui donne le nombre de clics effectués sur la page, est très ingénieuse. Elle se sert de la méthode Count et l’associe au click.

La notation this. est une auto-référence. Focus et blur sont des contraires. Il est donc impossible que le programme reconnaisse un click à l’intérieur de la petite boîte et permette de fausser le décompte.

La fonction sur le choix d’un fruit se sert aussi de la notation this. Il faut spécifier que l’on s’intéresse à this l’objet car this peut aussi faire référence à une fonction.

Les submits:note

Il n’est peut-être pas nécessaire de valider tous les champs, dans un formulaire.C’est plus rapide et moins lourd pour le premier exemple.

Les forms sont très versatiles et faciles à créer. On spécifie input type="text" et une boîte de saisie apparaît. L’exemple 1 se sert de ‘radio’ buttons...etc

Pour l’exemple avec fonction, l’identification passe par document.forms suivi du nom de la forme en question, du type d’élément particulier, du nom de la valeur recherchée, ici prénom.

À remarquer, l'appel de la fonction se sert de la commande return.

Les submits

les Forms

http://www.javascript-coder.com/http://

Fraises:amélioration

Notre petit programme fraises fait son travail, mais on peut l’améliorer par l’ajout d’instructions pour des cas de réponses inattendues de la part du visiteur. Par example, s’il répond plusieurs à la demande du nombre de fraises désirées, le programme par défaut se replie sur Nan, c’est-à-dire, not a number. S’il demande 8 fraises, on lui répond logiquement qu’il en reste -3, s’il demande -3 fraises, on lui apprend qu’il y en a maintenant 8. Dans une réelle situation d’achat en ligne, il faut indiquer au visiteur le comportement que l’on désire de sa part.

Les correctifs passent par des boucles if, then qui refusent une réponse inadéquate et demandent au visiteur de se reprendre.

En exemple, qui suit, on ajoute un test qui détecte une réponse de plus de 5. Les parenthèses {} indiquent que l’on a créé une fonction.

Petit calcul

En plaçant Javascript dans un corps de page Web, il devient possible de faire un petit calcul de façon interactive avec un visiteur. L’exemple contient un scénario autour d’une portion de fraises.

En tout premier lieu, le programme ‘déclare’ une variable fraises qui prend la valeur numérique de 5. La commande alert informe le visiteur qu’il y a 5 fraises.

On crée ensuite une deuxième variable monPlat. Sa valeur numérique va dépendre de la réponse du visiteur. Combien veut-il de fraises?

En troisième lieu, la valeur de fraises va changer. parseInt(monPlat) lit la valeur numérique en entrée que le visiteur a tapé. Fraises soustrait cette valeur de sa propre valeur initiale. Par défaut, le visiteur demande 1fraise, mais pour 2, il en resterait 3.

alert communique qu’il reste 3 fraises.

http://www.htmlgoodies.com/primers/jsp/
source: les tutos Javascript Basics sur HTML Goodies.

Le temps des...