Trucsweb.com

Trucsweb.com

Javascript

Les événements du Javascript

RDFFav

Les événements du Javascript - Base de la programmation orientée-objet

Un document comporte plusieurs objets, les objets peuvent être les éléments d’un formulaire, les images les liens les textes et même le document lui-même etc. Cette technique orientée-objet permet d’isoler les objets entre eux en leur donnant une certaine indépendance.onafterupdate onblur onchange onclick ondbclick onfocus onhelp onkeydown onkeypress onkeyup onLoad onmousedown onmousemove onmouseout onmouseover onmouseup onreadystatechange onreset onresize onscroll onselect onsubmit onunload onerrorLes événements du Javascript - Base de la programmation orientée-objet

  • · Niveau : DÉBUTANT
  • · Compatibilité : Netscape 3+ et Internet 3+

Un document comporte plusieurs objets, les objets peuvent être les éléments d’un formulaire, les images les liens les textes et même le document lui-même etc. Cette technique orientée-objet permet d’isoler les objets entre eux en leur donnant une certaine indépendance. Parmi les techniques de manipulation des objets il existe les événements ou "Event". Un événement est une action commise par l’utilisateur qui affecte directement un ou plusieurs objets. À l’aide de mot réservé vous pouvez réagir et contrôler à peu prêt tout ce qui est fait par l’usager.

NOTE : Parmi les événements il y a le FOCUS. Cet événement est très important à comprendre car certains objets ne réagissent aux événements que lorsqu’ils sont en état de FOCUS. Le FOCUS est attribué à un seul objet à la fois. Par exemple lorsque vous entrez dans une page, le FOCUS est par défaut le document lui-même. Pour bien saisir, cliquez sur la touche TAB, vous aller observer le mouvement du FOCUS dans de la fenêtre. Lorsque le FOCUS est sur un objet, une ligne pointillée en fait le tour. Tout ce qui se fait sous Windows fonctionne de cette façon. Que ce soit en HTML, Javascript, Visual Basic ou même en C. C’est pourquoi si le FOCUS n’est plus directement dans le navigateur, la touche TAB vous permet de change le FOCUS entre les objets de Windows, c’est à dire entre application ou fichier sur le bureau etc.

: Compatible avec Netscape Navigator 3 et plus.
: Compatible avec Netscape Navigator 4 et plus.
: Compatible avec Internet Explorer 3 et plus.
: Compatibleavec Internet Explorer 4 et plus.

Événement Avec Description

OnAbort
BODY,
FRAMESET
À l’interruption du chargement d’une page.
OnAfterUpdate Tout Après une modification d’’un formulaire.
OnBlur LABEL,
INPUT,
SELECT, TEXTAREA, BUTTON
Quand un objet perd son FOCUS.
OnChange INPUT,
TEXTAREA
Après la modification d’un objet.
OnClick Tout Quand l’utilisateur clic sur un objet.
OnDbClick Tout Quand l’utilisateur bouble clic sur un objet.
OnError Tout Quand un objet n’a pas été chargé.
OnFocus LABEL,
INPUT, SELECT, TEXTAREA, BUTTON
Quand un objet prend le FOCUS.
OnHelp Tout

Quand l’utilisateur appuie sur la touche F1 (aide).

OnKeyDown Tout Quand l’utilisateur appuie sur une touche
OnKeyPress Tout Quand l’utilisateur relâche une touche
OnKeyUp Tout Quand l’utilisateur relâche une touche sur un objet.
OnLoad BODY,
FRAMESET
À l’ouverture d’un document.
OnMouseDown Tout Quand l’utilisateur appuie sur un bouton de la souris.
OnMouseMove Tout Quand l’utilisateur bouge la souris.
OnMouseOut Tout Quand l’utilisateur bouge la souris hors d’un objet.
OnMouseOver Tout Quand l’utilisateur bouge la souris au dessus d’un objet.
OnMouseUp Tout Quand l’utilisateur relâche un bouton de la souris.
OnReadyStateChange FORM Quand le document se charge.
OnReset FORM Quand le bouton RESET d’un formulaire est cliqué.
OnResize BODY Quand l’utilisateur redimensionne la fenêtre du navigateur
OnScroll BODY Quand l’utilisateur se sert des barres de défilement de la page
OnSelect INPUT,
TEXTAREA
Quand l’utilisateur sélectionne du texte
OnSubmit FORM Quand un formulaire est envoyé.
OnUnLoad BODY,
FRAMESET

Quand le navigateur ferme la page HTML


Mise à jour (2019)
<button onclick="maFonction();">Cliquez ici</button>
Souris (Mouse)

onclick, oncontextmenu, ondblclick, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseover, onmouseout, onmouseup

Clavier (Keyboard)

onkeydown, onkeypress, onkeyup

Cadre (Frame)

onabort, onbeforeunload, onerror, onhashchange, onload, onpageshow, onpagehide, onresize, onscroll, onunload

Formulaire (Form)

onblur, onchange, onfocus, onfocusin, onfocusout, oninput, oninvalid, onreset, onsearch, onselect, onsubmit

Glisser (Drag)

ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop

Presse-papiers (Clipboard)

oncopy, oncut, onpaste

Média

onabort, oncanplay, oncanplaythrough, ondurationchange, onended, onerror, onloadeddata, onloadedmetadata, onloadstart, onpause, onplay, onplaying, onprogress, onratechange, onseeked, onseeking, onstalled, onsuspend, ontimeupdate, onvolumechange, onwaiting

Animation

animationend, animationiteration, animationstart

Divers

transitionend, onmessage, onmousewheel, ononline, onoffline, onpopstate, onshow, onstorage, ontoggle, onwheel, ontouchcancel, ontouchend, ontouchmove, ontouchstart


Exemples :
Avec le document
<body OnLoad="alert('Message')">
Avec un lien
<a href="javascript:;" OnClick="alert('Message')">Lien hypertexte</a>
Lien hypertexte
Avec un formulaire
<form OnSubmit="alert('message')"><br />
<input OnFocus="alert('message')">
</form>
Équivalence JavaScript des attributs de style CSS

L’idée est quand un style CSS est un nom composé, en javascript on enlève le tirer et remplace la première lettre du deuxième mot en majuscule. Examples:

  • color = color
  • background-color = backgroundColor
  • font-style = fontStyle
  • font-weight = fontWeight
Propriétés de bloc
NomNom JavaScriptDescriptionValeurs possiblesTypes d’élémentExamplehéritage
borderAjuste border width, style et color.Voir border width, style, et colorTout{border: medium solid green}Non
border-bottomAjuste le bottom border width style, et color.Voir border width, style, et colorTout{border-bottom: medium solid green}Non
border-bottom-widthAjuste le bottom border widththin, medium, thick, ou longueurTout{border-bottom-width: thin}Non
border-colorAjuste le border colorUne valeur de couleur, color, #RRGGBBTout{border: #0000ff}Non
border-leftAjuste le left border width style, et color.Voir border width, style, et colorTout{border-left: medium solid green}Non
border-left-widthAjuste le left border widththin, medium, thick, ou longueurTout{border-left-width: thin}Non
border-rightAjuste le right border width style, et color.Voir border width, style, et colorTout{border-right: medium solid green}Non
border-right-widthAjuste le right border widththin, medium, thick, ou longueurTout{border-right-width: thin}Non
border-styleAjuste border stylenone, dotted, dashed, solid, double, groove, ridge, inset, outsetTout{border: dashed}Non
border-topAjuste le top border width style, et color.Voir border width, style, et colorTout{border-top: medium solid green}Non
border-top-widthAjuste le top border widththin, medium, thick, ou longueurTout{border-top-width: thin}Non
border-widthAjuste Border width.thin, medium, thick, ou longueurTout{border-width: 8}Non
clearDétermine comment réagie le « floating ».none, left, right, bothTout{clear: left}Non
floatSpécifie comment le texte est « wrapped » et où il sera aligné.none, left, rightTout{float: left}Non
heightHeight de l’élémentauto ou la hauteurÉléments bloc et img, input, textarea, select et objetc{height: 200}Non
marginAjuste l’élément margin width. Une seule valeur ajuste toutes les marges, deux valeurs ajuste top et bottom, quatre valeurs ajuste les marges top, right, bottom, et left margins.auto, longueur, ou pourcentageTout{margin: 4em 2em 4em 2em}Non
margin-bottommarginBottomAjuste l’élément bottom marginlongueur, ou pourcentageTout{margin-bottom: 4em}Non
margin-leftmarginLeftAjuste l’élément left marginlongueur, ou pourcentageTout{margin-left: 4em}Non
margin-rightmarginRightAjuste l’élément right marginlongueur, ou pourcentageTout{margin-right: 4em}Non
margin-topmarginTopAjuste l’élément top marginlongueur, ou pourcentageTout{margin-top: 4em}Non
paddingEspace entre la bordure et le contenu. Une seule valeur ajustes tout les côtés, deux valeurs ajuste top/bottom et left/right, trois valeurs ajuste top, right/left, aet bottom, et quatre valeurs ahuste top, right, bottom, et left.longueur, ou pourcentageTout{padding: 4em}Non
padding-bottomEspace entre bottom border et content.longueur, ou pourcentageTout{padding-bottom: 4em}Non
padding-leftEspace entre left border et content.longueur, ou pourcentageTout{padding-left: 4em}Non
padding-rightEspace entre right border et content.longueur, ou pourcentageTout{padding-right: 4em}Non
padding-topEspace entre top border et content.longueur, ou pourcentageTout{padding-top: 4em}Non
widthWidth de l’élémentauto ou la hauteur en nombre ou percentageÉléments bloc et img, input, textarea, select et objetc{width: 40em}Non

Propriétés de couleur et de couleur de fond
NomNom JavaScriptDescriptionValeurs possiblesTypes d’élémentExamplehéritage
backgroundAjuste la couleur du fond, la répétition, l’image, fixe ou défillement et sa position.Voir background-color, background-image, background-attachment, background-repeat, background-positionTout{background: #8080ff}Non
background-attachmentDétermine si l’image de fond est fixe ou défillement.scroll, fixedTout{background-attachment: scroll}Non
background-colorbackgroundColorAjuste la couleur de fond.Nom ou valeur colorTout{background-color: #8080ff}Non
background-imageAjuste l’image du fond.urlTout{background-image: url('image.gif')}Non
background-positionAjuste la position initiale de l’image du fond.top, center, bottom, left, center, right, ou pourcentagesBloc et img, input, textarea, select, et object{background-position: left top}Non
background-repeatAjuste comment l’image de fond sera répétée.repeat, repeat-x, repeat-y, no-repeatTout{background-repeat: no-repeat}Non
colorcolorAjuste la couleur de l’élément.Nom ou valeur colorTout{color: green}Oui

Propriétés de classification
NomNom JavaScriptDescriptionValeurs possiblesTypes d’élémentExamplehéritage
displayAjuste le type d’élément.block, inline, list-item, noneTout{display: list-item}Non
list-stylelistStyleAjuste le type de list style et/ou la position.Voir list-style-type et list-style-positionList-item{list-style: circle}Oui
list-style-imageAjuste l’image utilisée comme puce.urlList-item{list-style-image: url(this.gif)}Oui
list-style-typeAjuste le type de list style.circle, disc, decimal, lower-alpha, lower-roman, none, square, upper-alpha, upper-romanList-item{list-style-type: square}Oui
list-style-positionAjuste la position de la puce par rapport au texte ainsi que son emballage.inside, outsideList-item{list-style: circle}Oui
whitespaceAjuste le traitement des espaces à l’intérieur d’un élément.normal, pre, nowrapBlock{whitespace: pre}Oui

Propriétés de police de caractères
NomNom JavaScriptDescriptionValeurs possiblesTypes d’élémentExamplehéritage
fontSpécifie la propriété fontVoir font-family, font-size, font-style, font-variant, et font-weight.Tout{font: 20pt}Oui
font-familyfontFamilySpécifie font family a utiliserfamily nameTout{font-family: ariel roman}Oui
font-sizeSpécifie font size a utiliserxx-small, x-small, small, medium, large, x-large, xx-large, larger, smaller, longueur, ou pourcentageTout{font-size: 18pt}Oui
font-stylefontStyleSpécifie font style a utilisernormal, italic, obliqueTout{font-style: italic}Oui
font-variantfontVariantUtilisé pour déterminer quand utiliser normal ou petite capitale.normal, small-capsTout{font-variant: small-caps}Oui
font-weightfontWeightAjuste font weight.normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900Tout{font-weight: 600}Oui

Propriétés de texte
NomNom JavaScriptDescriptionValeurs possiblesTypes d’élémentExamplehéritage
letter-spacingAjuste l’espace entre les charactères.normal ou longueurTout{letter-spacing: 0.2em}Oui
line-heightlineHeightAjuste la hauteur de la ligne.normal, un number, le pourcentage de l’élément font size,Tout{line-height: 2}Oui
text-aligntextAlignAjuste l’alignement du texte.left, right, center, justifyBlock{text-align: center}Oui
text-decorationtextDecorationAjuste la l’attribut decoration du text.none, overline, underline, line-through, blinkTout{text-decoration: blink}Non
text-indenttextIndentAjuste l’indentation du premier élément de la ligne.length ou pourcentageBlock{text-indent: 5%}Oui
text-transformtextTransformTransforme le texte en une de ces valeurs.none, capitalize, uppercase, lowercaseTout{text-transform: uppercase}Oui
vertical-alignverticalAlignAjuste la position vertical.baseline, sub. super, top, middle, bottom, text-top, text-bottom, ou pourcentageInline{vertical-align: sub}Non
word-spacingAjuste les espace en extra entre les mots.normal ou longueurTout{word-spacing: 0.2em}Oui
Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 4286 - Pages vues : 30857
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@