javascript tome xx - inputs && outputs

Transcription

Inputs && Outputs
en
J AVA S C R I P T (Programmation Internet) V O L . V
Pour Débutant
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
La dernière révision de ce texte est disponible sur CD.
CHAPITRE 9 : LES TROIS BOÎTES DE DIALOGUE :
L’objet window comporte trois méthodes pour les messages et dialogues :
alert("message") : ne retourne rien (undefined) ;
confirm("message") : retourne boolean ; et
prompt("message", val_init) ; retourne la valeur saisie.
Boîtes de saisie : essentiellement l’élément input.
Ceci c’est sans oublier le « document . write ( ) » pour l’affichage
simple.
Remarque :
Tous les éléments HTML peuvent servir de déclencheurs d’événement.
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-V
CHAPITRE 10 : LES VALEURS DE SAISIE :
Toutes les données sont saisies comme chaînes de caractères.
Si la boîte de saisie contient quelque chose, JS affiche son contenu.
si elle est vide, JS affiche une chaîne vide.
Si la boîte de saisie contient quelque chose, l’évaluation de sa négation
(!id) dans JS donnera la valeur logique false.
si elle est vide, l’évaluation de sa négation (!id) dans JS donnera la valeur logique true.
<input
id=i1
onblur="cl(value)
,
cl(!value)"
ue="input1_cointent">
<input id=i2 onblur="cl(value) , cl(!value)">
val-
<script type="text/javascript">
cl=console.log
iv1=document.getElementById('i1').value
cl("Affichage des input")
cl(iv1) // Affiche contenu de iv1
cl(!iv1) // Négation logique de iv1
cl("Affichage de prompt puis !prompt")
cl(prompt("Tapez qqc")) // Affiche Input de prompt
cl(!prompt("Ne tapez rien")) // Négation logique
prompot
</script>
Exécution dans la console :
Inputs && Outputs
2 / 21
jeudi, 4. avril 2019
de
JavaScript Tome-V
Affichage des input
input1_cointent
false
this.html:9
this.html:10
this.html:11
this.html:12
true
this.html:13
Affichage des typeof input
this.html:15
string
this.html:16
boolean
this.html:17
string
this.html:18
boolean
this.html:19
Affichage de prompt puis !prompt this.html:21
dias
this.html:22
true
this.html:23
Affichage de typeof prompt puis !prompt
this.html:25
string
this.html:26
boolean
this.html:27
luy
this.html:1
false
this.html:1
this.html:2
true
this.html:2
Donc pour tester si une variable, un argument ou un champ de saisie est
vide, au lieu d’écrire de longues instructions, comme :
Pour un champ souhaité texte :
if (x == undefined || x == null || x == "")
il suffit d’écrire :
if(!x)...
et pour éviter une confusion si la valeur est zéro, on ajoute :
if (!x && x != 0)
Inputs && Outputs
3 / 21
JavaScript Tome-V
Pour affecter une valeur par défaut à un paramètre au cas où la fonction
appelante n’a pas envoyé d’argument, on peut écrire :
<script>
function f(x, y) {
console.log(x || 50);
console.log(y || "dummy");
}
f(25);
</script>
Exécution :
25
dummy
Inputs && Outputs
this.html:3
this.html:4
4 / 21
JavaScript Tome-V
CHAPITRE 11 : AFFICHAGE DES OUTPUTS :
Quelques techniques pour afficher un output :
window.alert() ou alert() : Boîte de dialogue avec un message.
console.log : Écrit dans la console (poste/pupitre de dialogue)
.innerHTML : Écrit directement dans un élément fermé.
.innerTEXT : Écrit directement dans un élément fermé.
.outerHTML : Écrit sur un élément fermé.
.text : Écrit directement dans une option fermée.
.textContent : Écrit directement dans une option fermée.
.value : écrit dans la valeur d’un élément < input >.
document.write() = write() : Écrit dans le document qui a le focus.
function f(){
var v=document.getElementById("idiv").tagName;
var nd=window.open();
window.alert("Avec window.alert() = "+v);
alert("Avec alert() = "+v);
document.getElementById("idiv").innerHTML=
"Avec getElementById() ds DIV = "+v
console.log("Avec console.log = "+v);
nd.document.write("Avec nd.document.write() = "+v);
}
</script>
<body onload="f()"><div id="idiv"></div></body>
Exécution :
Avec
Avec
Avec
Avec
Avec
window.alert() = DIV
alert() = DIV
getElementById() ds DIV = DIV
console.log = DIV
nd.document.write() = DIV
Inputs && Outputs
5 / 21
outputs.html:9:3
Inputs && Outputs
JavaScript Tome-V
6 / 21
JavaScript Tome-V
CHAPITRE 7 : LES MÉTHODES « GET… » dont « GETELEMENT... » :
getElementsByTagName("input");
getElementsByName("nrad");
getElementsByTagNameNS();
getElementsByClassName("dummy");
getElementById("irad");
getSelection();
<script>
function f(p) {
console.log(p);
tmp="";
t=document.getElementsByTagName("input");
n=document.getElementsByName("nrad");
c=document.getElementsByClassName("dummy");
i=document.getElementById("irad");
}
f("...CHARGEMENT EN COURS");
d();
function d(){
nL=n.length; // Accès à t, n, c et i de f()
console.log("n"+n+" * n.length="+nL)
for(k=0;k<nL;k++){
console.log("==> n[k].name="+n[k].name+
" * n[k].id="+n[k].id);
console.log("c[k].className="+
c[k].className+"t[k].tagName="+
t[k].tagName);
v = n[k].value; // Les value des input
tmp+=v+", "; // tmp="" définie dans f()
}
console.log(tmp);
}
</script>
<body onload='f("...Depuis BODY")' onclick="d()">
Inputs && Outputs
7 / 21
JavaScript Tome-V
<input type=radio name="nrad"
id="irad1" class="dummy" value="Un">
id="irad2" class="dummy" value="Deux">
id="irad3" class="dummy" value="Trois">
<button><===Cliquez un bouton ou ici</button>
</body>
Exécution :
...CHARGEMENT EN COURS
n[object NodeList] * n.length=0
...Depuis BODY
n[object NodeList] * n.length=3
==> n[k].name=nrad * n[k].id=irad1
c[k].className=dummyt[k].tagName=INPUT
Un, Deux, Trois,
Inputs && Outputs
8 / 21
JavaScript Tome-V
CHAPITRE 9 : LES TROIS BOÎTES DE DIALOGUE :
L’objet window comporte trois méthodes pour les boîtes de dialogue :
alert("message") : ne retourne rien (undefined) ;
confirm("message") : retourne boolean ; et
prompt("message", val_init) ; retourne la valeur saisie.
Boîtes de saisie : essentiellement l’élément input.
Remarque :
Tous les éléments HTML peuvent servir de déclencheurs d’événement.
CHAPITRE 10 : LES VALEURS DE SAISIE :
Toutes les données sont saisies comme chaînes de caractères.
Si la boîte de saisie contient quelque chose, JS affiche son contenu.
si elle est vide, JS affiche une chaîne vide.
Si la boîte de saisie contient quelque chose, l’évaluation de sa négation
(!id) dans JS donnera la valeur logique false.
si elle est vide, l’évaluation de sa négation (!id) dans JS donnera la valeur logique true.
<input
id=i1
onblur="cl(value)
,
cl(!value)"
ue="input1_cointent">
<input id=i2 onblur="cl(value) , cl(!value)">
cl=console.log
Inputs && Outputs
9 / 21
val-
JavaScript Tome-V
cl("Affichage des input")
cl("Affichage de prompt puis !prompt")
cl(prompt("Tapez qqc")) // Affiche Input de prompt
cl(!prompt("Ne tapez rien")) // Négation logique
prompot
</script>
Exécution dans la console :
Affichage des input
input1_cointent
false
this.html:9
this.html:10
this.html:11
this.html:12
true
this.html:13
Affichage des typeof input
this.html:15
string
this.html:16
boolean
this.html:17
string
this.html:18
boolean
this.html:19
Affichage de prompt puis !prompt this.html:21
dias
this.html:22
true
this.html:23
Affichage de typeof prompt puis !prompt
this.html:25
string
this.html:26
boolean
this.html:27
luy
this.html:1
false
this.html:1
this.html:2
true
this.html:2
Inputs && Outputs
10 / 21
de
JavaScript Tome-V
Donc pour tester si une variable, un argument ou un champ de saisie est
vide, au lieu d’écrire de longues instructions, comme :
Pour un champ souhaité texte :
if (x == undefined || x == null || x == "")
il suffit d’écrire :
if(!x)...
et pour éviter une confusion si la valeur est zéro, on ajoute :
if (!x && x != 0)
Pour affecter une valeur par défaut à un paramètre au cas où la fonction
appelante n’a pas envoyé d’argument, on peut écrire :
<script>
function f(x, y) {
console.log(x || 50);
console.log(y || "dummy");
}
f(25);
</script>
Exécution :
25
dummy
Inputs && Outputs
this.html:3
this.html:4
11 / 21
JavaScript Tome-V
Boîtes de saisie
(essentiellement l’élément input).
L’élément INPUT utilise l’attribut « type » pour spécifier le type de donnée attendu dans le champ input. Quelques types sont :
text :
texte sans retour à la ligne
password :
texte sans retour à la ligne, pour une information sensible.
checkbox :
Boîte à cocher (booléen).
radio :
Bouton radio (booléen).
submit :
Envoie le formulaire. Doit être le dernier élément à cliquer.
file :
Fichier arbitraire de type MIME et optionnellement un nom de fichier.
<input type="file" name="nfile" accept="folder/*"
min=0 max=20/>
image :
Coordonnée relative à une taille d’image particulière. Doit être le dernier
élément sélectionné. Soumet aussi le formulaire.
hidden :
Information sensible cachée à l’utilisateur.
Inputs && Outputs
12 / 21
JavaScript Tome-V
select :
Valeur énumérée, dont les valeurs sont structurellement gardées ensemble.
select multiple :
Ensemble de zéro ou plusieurs valeurs d’une liste prédéfinie, semblable
au type checkbox, et dont les valeurs sont structurellement gardées ensemble.
textarea :
Champ de saisie de texte, sans restriction de retour à la ligne.
button :
Valeur ébumérée, devant sémantiquement être le dernier élément à sélectionner. Soumet le formulaire comme avec le type submit.
reset :
Réinitialise le formulaire.
Format de saisie ou d’affichage:
datetime :
Date et Heure (an, mois, joury, heure, minute, seconde) en format
[ISO8601] avec fuseau horaire sur UTC.
<input type="datetime" value="2019-02-17T19:33:59Z">
date :
Date (an, mois, jour) format [ISO8601
<input type="date" value="2019-02-17">
Inputs && Outputs
13 / 21
JavaScript Tome-V
expdate :
Date avec an et mois format [ISO8601].
<input type=" expdate " value="2019-02">
week :
Date avec an et numéro de la semaine en format [ISO8601.
<input type="week" value="2019-W7">
time :
Heur, minute en format [ISO8601] sans fuseau horaire (time zone).
<input type="time" min="18:00:00" max="20:00:00" value="19:48:00">
number :
Nombre, dans le format « base » suivi de « e » suivi optionnellement de
« l’exposent » :
Base : signe ("-") facultatif, un ou plusieurs entiers décimaux, un point
decimal facultative (".") et une partie fractionnaire décimale.
Inputs && Outputs
14 / 21
JavaScript Tome-V
Exposent : un autre signe ("-") facultatif, un exposent entier représentant
l’index d’une puissance de 10 qui multipliera la base. Si l’exposent est
omis il est supposé être à zéro.
<input type="number" min="10" max="20" value=12>
range :
<input type="range" min="10" max="20" value=12>
email :
e-mail en format [RFC2822].
<input type="email" value="[email protected]">
tel :
Numéro de telephone en format [RFC2806].
uri :
Une URI en format [RFC2396].
location :
Coordonnée géographique, en deux nombres rationnels (éventuellement
avec le signe négatif : un ou plusieurs chiffres décimaux, un point séparateur, et six autres chiffres décimaux) les deux coordonnées séparées
par une virgule.
Inputs && Outputs
15 / 21
JavaScript Tome-V
D’autres attributs de l’élément <form> :
disabled :
maxlength :
S’applique aux types « text », « password » et « file », « email », « tel »,
ou « uri » et les éléments « textarea », ni aux champs de date, heure, et
numerique (seulement aux types « text » et « password » dans HTML4.
name :
readonly :
S’applique aux types « text », « password», « email », « tel », « uri », et
les types relatifs à date, heure, et numérique, et l’élément « textarea ».
Inputs && Outputs
16 / 21
JavaScript Tome-V
CHAPITRE 11 : AFFICHAGE DES OUTPUTS :
Quelques techniques pour afficher un output :
window.alert() ou alert() : Boîte de dialogue avec un message.
console.log : Écrit dans la console (poste/pupitre de dialogue)
innerHTML : Écrit directement dans un élément fermé.
document.write() = write() : Écrit dans le document qui a le focus.
function f(){
var v=document.getElementById("idiv").tagName;
var nd=window.open();
window.alert("Avec window.alert() = "+v);
alert("Avec alert() = "+v);
document.getElementById("idiv").innerHTML=
"Avec getElementById() ds DIV = "+v
console.log("Avec console.log = "+v);
nd.document.write("Avec nd.document.write() = "+v);
}
</script>
<body onload="f()"><div id="idiv"></div></body>
Exécution :
Avec
Avec
Avec
Avec
Avec
window.alert() = DIV
alert() = DIV
getElementById() ds DIV = DIV
console.log = DIV
nd.document.write() = DIV
outputs.html:9:3
À suivre…
Inputs && Outputs
17 / 21
JavaScript Tome-V
Kinshasa, le jeudi 4 avril 2019 (10:46:39 PM).
Mots-clés :
getElementsByTagName, getElementsByName, getElementsByTagNameNS, getElementsByClassName, getElementById, getSelection, alert,
confirm, prompt, Boîtes de saisie, input, output, console.log, write,
textContent, text, innerHTML, innerText, outerHTML,
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980)
Études humanités : Scientifique - Mathématiques & Physique.
Informaticien-amateur, Programmeur et WebMaster.
Chercheur indépendant, autonome et autofinancé,
bénévole, sans aucun conflit d’intérêt ou liens
d'intérêts ou contrainte promotionnelle avec qui
qu’il soit ou quelqu’organisme ou institution /
organisation que ce soit, étatique, paraétatique
ou privé, industriel ou commercial en relation
avec le sujet présenté.
+243 - 851278216 - 899508675 - 991239212 - 902263541 - 813572818
[email protected]
Inputs && Outputs
18 / 21
JavaScript Tome-V
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/LeDosage-Des-Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/LeHasard-Des-Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/PetiteIntroduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foien-Jesus-Christ-Pour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuitevisuelle-angulaire
• https://www.scribd.com/document/375349851/Lavariable-This
•
https://www.scribd.com/document/375024162/FonctionsImbriquees-en-JS
• https://www.scribd.com/document/374789297/FormatInterne-Des-Objets-JavaScript
•
https://www.scribd.com/document/374788758/Iterationsen-JavaScript
Inputs && Outputs
19 / 21
JavaScript Tome-V
• https://www.scribd.com/document/374738470/Le-PlusGrand-Secret-de-La-Creation
• https://www.scribd.com/document/374597969/NouvelleFormule-d-IMC-indice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/PropertyDescriptors
• https://www.scribd.com/document/373833282/l-ObjetGlobal-Window
•
https://www.scribd.com/document/372665249/JavascriptTome-II
• https://www.scribd.com/document/355291488/motiliteoculaire-2
• https://www.scribd.com/document/355291239/motiliteoculaire-I
• https://www.scribd.com/document/355290248/Script-dAnalyses-Des-Reflexes-Pupillomoteurs
•
https://www.scribd.com/document/321168468/Renseigne
ments-Id-et-Anthropometriques
•
https://www.scribd.com/document/320856721/Emission31-Jul-2016
•
https://www.scribd.com/document/318182982/Complicati
on-Visuelle-du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/RapportEntre-Oxymetrie-Et-Type-Respiration
•
Inputs && Outputs
20 / 21
JavaScript Tome-V
https://www.scribd.com/document/315746265/Classificati
on-Des-Medicaments
•
https://www.scribd.com/document/315745909/Incongruen
ces-Heresies-et-Heterodoxies-de-la-Notion-deLaboratoire
• https://www.scribd.com/document/315745725/RapportEntre-Oxymetrie-Et-Type-Respiration
Inputs && Outputs
21 / 21

javascript tome xx - inputs && outputs

Transcription

Documents pareils

Tutoriel Javascript - Simplon Boulogne sur Mer

Tutoriel Javascript - Simplon Boulogne sur Mer

version pdf

contrôleur système principal main controller system im 300

Chapitre 1 Introduction 11 Chapitre 2 Les bases de JavaScript 29

Enceinte active ACML3-230/16A

Tea House - ShowTime

Console - Bidon recyclé et Teck

Diapositive 1 - Département Montefiore

la console vsmile - MetaGames-EU