Comment utiliser JavaScript

JAVASCRIPT ET
ALGORITHMIQUE
N ° I I I - vendredi 31 mai 2019 (5:47:57 PM)
Pour Débuter
J.B. Dadet. DIASOLUKA Nz. Luyalu
: Comment utiliser JavaScript :
Un code JavaScript peut être utilisé 1. Directement incorporé/enfoui dans
un fichier de la famille HTML (à l’instar du PHP) ≈ code « inline », ou 2.
Dans un fichier autonome EXTERNE. Dans les deux cas le langage par défaut est le JS, et accessoirement. 3. Dans la console de débogage du browser.

Dans le premier cas (code JavaScript incorporé dans le fichier
HTML qui l’utilise) le code JS n’est accessible que par le fichier dans lequel il est défini. La balise d’ouverture ne comportera pas l’attribut src, et
le code à exécuter est délimité par les deux balises comme dans le premier
cas, comme suit :
<script type=text/javascript>
code (directives et instructions)
</script >
La balise <script></script> délimitera le code JavaScript imbriqué.

Dans le deuxième cas (code JavaScript contenu dans un fichier
« .JS » autonome externe), le code JS est accessible à tout fichier qui fait
appel à lui (en l’incluant), n’importe où dans le monde entier, pour autant
que sa machine soit connectée (visible) à l’Internet. Le code [à inclure
dans le fichier HTML appelant] pour accéder à un fichier .JS (ou mieux le
code JS contenu dans un fichier .JS) comportant le code à exécuter est le
suivant :
JAVASCRIPT && ALGORITHMIQUE
<script type="text/javascript" src="chemin complet du
code_source.js"></script>
La balise <script></script> n’est plus utilisé dans le fichier source.js.
Remarquez la balise d’ouverture <script> et la balise de fermeture obligatoire </script>, entre les deux balises on ne met rien. Pour la syntaxe des
balises, voyez les volumes sur le HTML.

Dans le troisième cas (saisie du code javascript dans le browser de
débogage du browser) il y a deux possibilités, et dans les deux cas on
n’utilise pas la fonction « console.log » pour afficher une variable, mais on
écrit cette variable directement. Si l’exécution signale par exempe une redéclaration de variables « let », rafraîchissez tout bonnement la page avec
<F5>. Deux possibilités s’offrent :
o Vous saisissez chaque ligne séparément, chaque ligne terminée avec
un <RET>. Cela permet de vérifier la valité syntactique de chaque
ligne au fur et à mesure de la saisie.
o Tout le code est directement saisi à la ligne de commande de la console, chaque ligne étant terminé par un <CTRL-RET> ou <SHIFTRET> et non pas avec un <RET>.
vendredi 31 mai 2019
-2/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Un mot sur le débogage :
Comme avec tout langage de programmation structuré (permettant les blocs
d’instructions), faites particulièrement attention avec les accolades d’ouverture
et de fermeture. L’omission / excès d’accolade non apparié est souvent signalée
seulement devant la balise de fermeture </script> ; imaginez si le programme a
de plus de 11'000 lignes comme un des miens.
Plusieurs trucs permettent de ménager ce problème :
1. Toujours faire une ou deux copies d’un programme qui marche ou seulement en cours de développement, de préférence sur des médias distincts.
2. Pour éditer un code source, travaillez sur une copie, préservez l’original.
3. Testez le programme au fur et à mesure que vous l’éditez, surtout avant
d’aller éditer sur des zones éloignées de la position en cours.
4. Utilisez autant de blocs <script></script> de moindre taille que possible =>
erreurs plus faciles à retrouver.
5. Si la version finale est boguée, faites une comparaison de fichiers avec la
dernière version qui avait marché, dans un comparateur de fichier (Top
PHP Studio, UltraEdit, UltraCompare, EmEdit, MS-Word, WordPerfect,
FolderMatch, ADCSheat - Advanced Directory Comparison and Synchronization, ed – ExamDiff, examxml, HexCmp – Hex Comparison,
wdiff, hws…).
Forme correcte
<script>
{
{
alert("1er")
}
{
alert("2è")
}
}
</script>
Forme boguée
<script>
{
}
{
alert("1er")
vendredi 31 mai 2019
-3/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
alert("2è")
}
}
</script>
Plus d’accolades fermantes que d’ouvrantes = Syntaxe.
<script>
{
{
alert("1er")
{
}
alert("2è")
}
</script>
Plus d’accolades
ouvrantes que de
fermantes =>
‘}’ attendu
<script>
{
{
alert("1er")
}
</script>
<script>
{
{
alert("2è")
}
}
</script>
L’erreur se cantonne au premier bloc <script></script>, le
deuxième bloc s’exécute sans problème.
Objets JS :
Un objet est simplement un type de données spécial avec une collection
de propriétés et méthodes. Les propriétés sont des attributs, les méthodes
sont des actions prédéfinies pour (ou incorporées à) l’objet.
Le type générique primitif d'objet JavaScript est l’objet Object. Tous les
objets JS (fonctions ou objets) sont des descendants de Object, héritant les
méthodes définies pour ce super-objet.
vendredi 31 mai 2019
-4/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Un « objet » avec « o » minuscule est une entité nommée qui englobe des propriétés et méthodes propres, ainsi qu’un prototype permettant une transmission de propriétés et méthodes héritables à ses instances (descendants). C’est
donc un type de données spécial avec une collection de propriétés et méthodes.
Les propriétés sont des attributs, les méthodes sont des actions prédéfinies
pour (ou incorporées à) l’objet
Un « Objet » avec « O » majuscule est l’ancêtre transcendant de tous les autres
objets. C’est le type générique primitif d'objet JavaScript. Tous les objets JS
(fonctions ou objets) sont des descendants de Object, héritant les méthodes définies pour ce super-objet.
Syntaxe de création : Le constructeur Object :
new Object() ;
Le constructeur d’un objet spécifie la fonction qui crée l’objet.
Voici dans l’ensemble les objets JavaScript (descendants de Object) :
ActiveXObject (ie) , Anchor , Applet , Area , Array , Boolean ,
Button , Checkbox , Date , Dictionary (ie) , document , Drive (ie)
, Drives (C - ie) , Enumerator (ie) , Error (ie) , event , File
(ie) , Files (C - ie) , FileSystemObject (ie) , FileUpload , Folder
(ie) , Folders (C - ie) , Form , Frame , Function * , Global (ie) ,
Hidden , History , Image , Java , JavaArray , JavaClass , JavaObject , JavaPackage , Layer , Link , Location , Math , MimeType ,
navigator , netscape 1 , Number , Object , Option , Packages ,
Password , Plugin , Radio , RegExp , Regular Expression (ie) , Reset , screen , Select , String , Style , Submit , sun 2 , Text ,
Textarea , TextStream (ie) , VBArray (ie) , window.
* JavaScript permet de créer facilement de nouvelles fonctions :
« netscape » est un objet JS prédéfini de premier niveau, permettant d’accéder à n'importe quelle classe Java du
package netscape à partir de JS. Cet objet est accessible sans usage de constructeur ou appel à une méthode.
2 « sun » est un objet JS prédéfini de premier niveau, permettant d’accéder à n'importe quelle classe Java du package sun à partir de JS. Cet objet est accessible sans usage de constructeur ou appel à une méthode.
vendredi 31 mai 2019
-5/5417:47:57
1
JAVASCRIPT && ALGORITHMIQUE
<script>
L10 = function(n){
return(Math.log(n)/Math.log(10))
}
alert("Log10 de "+100+" = " + L10(100))
</script>
Objet JS intrinsèque :
JS comporte plusieurs objets intrinsèques. Ce sont des objets qui font partie du
langage JavaScript standard : Array, Boolean, Date, Function, Global, Math,
Number, Object, RegExp, Regular Expression, and String. Ces objets sont disponibles pour tous les scripts.
Types primitifs de données en JS :
Ce sont des types de données faisant partie du langage JavaScript et manipulé
par valeur : number, Boolean, string, et function. Objects et arrays ne sont pas
des types primitifs de données JS.
Quelques Objets JS :
Objet Anchor
La méthode anchor crée automatiquement en temps d’exécution, un élément
« ancre » (=signet ou anchor) HTML utilisée comme cible d’un lien hypertexte,
donc la balise <a name= url_cible> </a> que vous auriez dû créer directement
et manuellement dans le document HTML. La méthode anchor s’utilise avec
les méthodes write ou writeln pour créer et afficher un élément HTML dans le
document. Les éléments créés avec cette méthode sont inscrits dans le tableau
des éléments (ancres cibles) comme les ancres ordinaires créés manuellement.
Syntaxe :
texte.anchor ( val_attrib ) ;
vendredi 31 mai 2019
-6/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
« texte » est une chaîne de caractères facultative ou une propriété d’un objet
existant, à afficher dans le document. L’objet « texte » est la chaîne de caractères qui sert de cible hypertexte.
« val_attrib » est une chaîne de caractères ou une propriété d’un objet existant.
C’est la valeur de l’attribut NAME dans la balise ou commande <A>.
Exemple :
<SCRIPT LANGUAGE="JavaScript">
tmp="" ; var description="Ancre de FOO<br><br>";
document.writeln(description.anchor("foo"));
alert("Nombre de anchors="+document.anchors.length)
for(k in document.anchors)
tmp+=document.anchors[k].name+"\n"
alert(tmp)
</SCRIPT>
<body>
<a href="#ungi">Aller à UNGI<br><br></a>
FOO FOO FOO FOO FOO
FOO FOO FOO FOO FOO
......
UNGI UNGI UNGI UNGI
UNGI UNGI UNGI UNGI
FOO FOO FOO FOO FOO FOO FOO
FOO FOO FOO FOO FOO FOO FOO
UNGI UNGI UNGI UNGI UNGI UNGI
UNGI UNGI UNGI UNGI UNGI UNGI
<a href="#foo"><br><br>Aller à FOO</a>
</body>
<SCRIPT LANGUAGE="JavaScript">
tmp="" ; var description="<br><br>Ancre de UNGI<br><br>";
document.writeln(description.anchor("ungi"));
alert("Nombre de anchors="+document.anchors.length)
for(k in document.anchors)
tmp+=document.anchors[k].name+"\n"
alert(tmp)
</SCRIPT>
Objet Date
Syntaxe pour créer un objet (ou instance de l’objet) Date :
1.
nvlObjetDate = new Date()
vendredi 31 mai 2019
-7/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
nvlObjetDate = new Date("jour_du_mois, année heures:min:secs")
nvlObjetDate = new Date(année, mois, jour)
nvlObjetDate = new Date(année, mois, jour, heures, min, secs)
2.
3.
4.
nvlObjetDate est soit le nom d’un nouvel objet ou la propriété d’un objet existant. année, mois, jour, heures, minutes et secondes sont : chaînes de carac-
tères dans 1 et 2, nombres entiers dans 3 et 4.
Comment utiliser l’objet Date :
nvlObjetDate.nomMéthode(paramètres)
Exceptions :
Les méthodes parse et UTC s’utilisent comme suit :
Date.parse(paramètres)
Date.UTC(paramètres)
Exemple1 :
<SCRIPT LANGUAGE="JavaScript">
vdate = new Date
document.write(vdate+ "<br>")
Thu Jan 1 20:39:48 UTC+0100 2009
1230838788691
1230838788691
1230838788691
vdate=vdate.getTime()
document.write(vdate+ "<br>")
vdate = new Date().getTime()
document.write(vdate+ "<br>")
vdate = (new Date).getTime()
document.write(vdate+ "<br>")
</SCRIPT>
Exemple2 :
<script language="JavaScript">
nDate = new Date(
"December,24,2008 14:15:16")
document.write(
nDate +"<br>" + nDate.getTime() +
"<br>" + nDate.toLocaleString() +
"<br>" + nDate.toGMTString())
</script>
vendredi 31 mai 2019
Wed Dec 24 14:15:16 UTC+0100 2008
1230124516000
mercredi 24 décembre 2008 14:15:16
Wed, 24 Dec 2008 13:15:16 UTC
-8/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Les méthodes de l’objet Date :
getDate , getDay , getFullYear , getHours , getMilliseconds ,
getMinutes , getMonth , getSeconds , getTime , getTimezoneOffset ,
getUTCDate , getUTCDay , getUTCFullYear , getUTCHours , getUTCMilliseconds , getUTCMinutes , getUTCMonth , getUTCSeconds , getVarDate , getYear , parse , setDate , setFullYear , setHours , setMilliseconds , setMinutes , setMonth , setSeconds , setTime , setUTCDate , setUTCFullYear , setUTCHours , setUTCMilliseconds , setUTCMinutes , setUTCMonth , setUTCSeconds , setYear , toGMTString ,
toLocaleString , toSource, toString , toUTCString , UTC , valueOf
Exemple :
<SCRIPT LANGUAGE="JavaScript">
vdate = new Date()
document.write(vdate+"<BR>");
document.write(vdate.toUTCString()+"<BR>");
document.write(vdate.toLocaleString()+"<BR>");
</SCRIPT>
Exécution :
Sun Dec 21 22:36:01 UTC+0100 2008
Sun, 21 Dec 2008 21:36:01 UTC
dimanche 21 décembre 2008 22:36:01
Voici un code JS qui donne le nombre de jours dans un mois :
<SCRIPT>
tot=0 ; tmp="" ; annee="1990"
for(k=1;k<13;k++) {
timeA = new Date(annee, k,1);
timeDifference = timeA - 86400000;
timeB = new Date(timeDifference);
var daysInMonth = timeB.getDate();
tmp+=(daysInMonth + ","); tot+=daysInMonth
}
alert(annee+" : "+tmp+"\n"+"Tot = "+tot)
tot=0 ; tmp="" ; d=new Date()
for(k=1;k<=12;k++) {
timeA = new Date(d.getFullYear(), k,1);
timeDifference = timeA - 86400000;
timeB = new Date(timeDifference);
var daysInMonth = timeB.getDate();
tmp+=(daysInMonth + ","); tot+=daysInMonth
}
alert(d.getFullYear()+" : "+tmp+"\n"+"Tot = "+tot)
vendredi 31 mai 2019
-9/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
</SCRIPT>
Enfin, un mot sur la gestion des erreurs en temps d’exécution, avec le trycatch. Cette instruction active le gestionnaire d’erreur de JScript :
Syntaxe :
Try { tryStatement }
catch(exception) { catchStatement }
Paramètres :
tryStatement
Exception
catchStatement
Instruction, pouvant être composée, dans laquelle se
produit l’erreur.
Nom de variable. La valeur initiale de l'exception est
la valeur de l'erreur générée.
Instruction de gestion des erreurs qui se produisent
dans l'instruction tryStatement. Elle aussi peut être
une instruction composée.
<script language="javascript" type="text/javascript">
v=Math.exp(1)
try{
if(typeof(v)=="undefined") throw(5)
else document.write(Math.Log(1/v))
}
catch(erJS) {
if(erJS==5) document.write("Erreur "+erJS+
" : Variable v non définie<br>")
else document.write("Erreur de syntaxe - Cherchez l'erreur")
}
</script>
Exécution : Erreur 5 : Variable v non définie
Si on libère la ligne 2 qui définit la
vendredi 31 mai 2019
Exécution :
-10/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
variable v, le programme exécute
ceci:
Erreur de syntaxe - Cherchez l'erreur
N.B. : L’opérateur « typeof » retourne une chaîne indiquant le type d’un opérande, qui peut être un objet, une variable, une chaîne ou un mot clé (keyword). Elle n’est pas une fonction, et sa syntaxe est :
typeof opérande
typeof (opérande)
Exemple :
<script language="javascript" type="text/javascript">
var v=1.23
document.write(typeof(v)+" 1 ")
s="chaîne"
document.write(typeof(s)+" 2 ")
a=new Array()
document.write(typeof(a)+" 3 ")
a2=new Array()
document.write(typeof(a2)+" 4 ")
document.write(Array+"="+typeof(Array)+" 5 ")
document.write(Array()+"="+typeof(Array())+" 6 ")
document.write(function(){} + " = "+
typeof(function(){})+" 7 ")
function f(p){
document.write(typeof(p)+" 8 ")
}
document.write(typeof(f)+" 9 ")
f()
</script>
Exécution :
number 1 string 2 object 3 object 4 function Array() { [native code] }
=function 5 =object 6 function(){}=function 7 function 9 undefined 8
Objet Math
Pour des opérations mathématiques :
Les 8 propriétés (constantes mathématiques) de l’objet Math sont :
vendredi 31 mai 2019
-11/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
E , LN2 , LN10 , LOG2E , LOG10E , PI , SQRT1_2 , SQRT2
Quelques méthodes disponibles avec l’objet Math sont:
abs, acos, acosh, asin, asinh, atan, atan2, atanh, cbrt, ceil,
clz32, cos, cosh, exp, expm1, floor, fround, hypot, imul, log,
log10, log1p, log2, max, min, pow, random, round, sign, sin, sinh,
sqrt, tan, tanh, toSource, trunc
L’objet « Math » n’est pas un constructeur, il appartient à l’objet global
« window » , on l’appelle sans instanciation.
vendredi 31 mai 2019
-12/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
L’objet Math est appelé sans instanciation et pas obligatoirement préfixé de
l’objet « widow » ou la variable « this » (qui représente « window », dans
l’espace globale).
<script>
document.write(Math.PI)
with(Math) {
x = E , ac=acos(1/2) , rc=sqrt(2) , pi=tan(atan(exp(log(PI))))
document.write(" * " + x + " * " + ac + " * " + rc + " * "+pi)
}
</script>
3.141592653589793 * 2.718281828459045 * 1.0471975511965976 *
1.4142135623730951 * 3.141592653589794
Rem. gén. :
Ordre de préséance et groupage des opérateurs
(Operator Precedence and grouping) : 3 + 4 * 5 = ?
La calculatrice Windows en mode standard => 35, tandis que
La même calculatrice en mode scientifique => 23.
Il existe en mathématique et en langages C et en JS un ordre de préséance des
opérateurs, par exemple les « * » (multiplication) et « / » (division) ont une plus
haute priorité ou préséance que les « + » (addition) et « - » (soustraction), ce qui
signifie que dans une expression qui comporte des additions et multiplications,
les multiplications et divisions sont effectuées avants les additions et soustractions. Les opérateurs à plus forte préséance sont évalués en premier :
2+3–5+9=9?
(2+3) – (5+9) = -9 , ((2+3)-5) + 9 = 9 ,
2 + (3-(5+9)) = -9 , 2 + (3-5) + 9 = 9.
C’est l’ordre de groupage : avec des opérateurs à une même priorité, le groupage
(associativité) se fait de gauche à droite. L’ordre de préséance s’applique en
premier puis, s’il y a dans l’expression des opérateurs avec le même niveau de
priorité, intervient l’ordre de groupage. Voici la table des 15 niveaux de prévendredi 31 mai 2019
-13/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
séance de la plus forte (1) à la plus faible (15). Les opérateurs à même niveau de
priorité sont évalués de droite à gauche. Les parenthèses forcent un ordre particulier, les parenthèses imbriquées dans d’autres ayant plus de priorité.
Niv Opérateur
Description
Grp
Field access, array indexing, and function calls
GàD
Unary operators, return data type, object creation, undefined values
DàG
Primaires
1
. [] ()
Unaires
2
++ -- - ~ ! delete new
typeof void
Binaires
3
*/%
Multiplication, division, modulo division
4
+-+
Addition, subtraction, string concatenation
GàD
Ternaires
5
?:
Opérateur conditionnel
<< >> >>>
Bit shifting
GàD
< <= > >= instanceof
Less than, less than or equal, greater than, greater than or
equal, instanceof
GàD
== != === !==
Equality, inequality, identity, nonidentity
GàD
Shift
6
Relationnels
7
Égalité
8
Logical Bitwise (Logique niveau bit)
9
&
Bitwise AND
10
^
Bitwise XOR
11
|
Bitwise OR
GàD
Logical Connective
12
&&
Logical AND
13
||
Logical OR
GàD
Conditionnel
14
?:
Conditional
DàG
Assignment, assignment with operation
GàD
Affectation (assignment)
15
= OP=
vendredi 31 mai 2019
-14/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Virgule
16
,
Multiple evaluation
GàD
OP= <=> +=, -=, /=, *=, %=, <<=, >>=, &=, ^=, |=
JavaScript ne gérant pas le type struct, l’opérateur d’accès à un membre de
structure “->” (niveau 1 de priorité dans C) n’y existe donc pas.
vendredi 31 mai 2019
-15/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Une application de la méthode « random ( ) » de l’objet « Math », c’est dans la
simulation. Voyons comment le HASARD peut frapper ou répartir/distribuer
un événément dans une société :
À supposer qu’on ait « n » salles de classes (par exemple 10 classes), et on veut
faire une répartition aléatoire de bagarres d’élèves dans différentes classes. On
numérote les différentes classes de « 0 à n ». On lance un dé à 10 faces (on génère un nombre aléaltoire) entre 0 et le nombre de classes. Le numéro qui se
pointe correspond au numéro de la classe où il y a bagarre. Après un certain
nombre de lancées (par exemple 10 pour donner la même chance UNIQUE à
chaque classe), on se décide de voir la répartition des bagarres entre les différentes classes : le code suivant le fait.
<script type="text/javascript"> "use strict";
let nbGroup=10,lesGroup=new Array(nbGroup),el,s="";
lesGroup.fill(0);
for(let k=0;k<10;k++){
el=Math.floor(Math.random()*nbGroup);
lesGroup[el]++;
s+=el+" "
}
console.log(s);
for(var [cle,val] of Object.entries(lesGroup))
console.log(cle,' = ',val+"×");
</script>
À l’exécution de ce code nous constatons que les 3 premières bagarres sont survenues dans la classe numéro 9, la 4è dans la classe 5, la 5è dans la classe 7, la 6è
dans la classe 8, la 7è dans la classe 6, la 8è de nouveau dans la classe 9, la neuvième dans la classe 3, et la dixième bagarre dans la classe 1.
La première répartition aléatoire des bagarres a donc été comme ceci :
Classe numéro 0 : Zéro bagarres ; Classe numéro 1 : Une bagarre ;
Classe numéro 2 : Zéro bagarres ; Classe numéro 3 : 1 bagarre ;
…
Classe numéro 9 : 4 bagarres.
Et on pourrait conclure que la classe n° 9 aime beacoup de bagarres, alors que ce
n’est qu’un fait du hasard (lancée de dé) qui a frappé tel qu’il l’avait voulu.
vendredi 31 mai 2019
-16/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Une première répartition aléatoire et son graphe : Tois segments ascendants de
même amplitude, trois segments identiques et horizontaux sur un même prolongement et en continuité du dernier segment ascendant, trois segments ascendants de même amplitude et sur un même prolongement. C’est comme si ce
n’était pas une randomisation (suite aléatoire).
Une deuxième répartition aléatoire et son graphe :
Un « W » parfaitement symétrique, bien séparé et individualisé d’une corbeille
ayant l’une des façades exactement le double de la façade d’en face.
vendredi 31 mai 2019
-17/54-
17:47:57
Une troisième répartition aléatoire et son graphe
(Assez cylique avec semblant de déperdition d’énergie) :
Une quatrième répartition aléatoire avec son graphe (semblant de symétrie) :
Une cinquième répartition aléatoire :
JAVASCRIPT && ALGORITHMIQUE
Succession en croissance géométrique, des chiffres différents de zéro, mais aussi, dans le graphe, le dernier « 1 », le « 2 » et le « 4 » sont reliés EN LIGNE
DROITE :
Et cette autre combinaison, assez poétique ou plutôt à tendance musicale :
Translation, shift ou rotate... continuellement dans la même direction ?
0 1 – 0 1 2 – 1 2 – 1 2 0.
Encore un fait, d’un beau hasard !
Voici de nouveau et en image l’illustration concrète, que le hasard peut faire
quelque chose de beau, élaboré, ultrastructuré :
« LE HASARD NE PRODUIT PAS QUE DU CHAOS » !
ou
«HASARD NE SIGNIFIE PAS CHAOS » !
vendredi 31 mai 2019
-19/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Ci-après, cet autre hasard qui donne une distribution pseudo-symétrique, et un
graphe rappelant un ECG : Est-ce un semblant d’explication des paréidolies ? Le
hasard peut créer des formes géométriques élaborées.
Essayez de façonner une interpération « paréidologique » avec la suite aléatoire
suivante et son graphe :
vendredi 31 mai 2019
-20/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
vendredi 31 mai 2019
-21/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Une application de l’opérateur modulo (%) :
Une année est-elle bissextile ?
<div style="size='100pt';width='50'" class="tCl"></div>
<SCRIPT> "use strict";
let ta = document.getElementsByClassName("tCl")
let annee=[0,1,4,8,10,16,20,40,100,110,200,210,300,310,320,
400,410,420,510,610,710,810,910,1000,1010,1020,1990,
2000,2010,2020,2110,2210,2310,2410,2500,2510,2610,
3000,3010,3510,3610,4000,4010,4020,4050,4060,
5000,5010,5050,6000,6010,6030];
for(let k in annee){
let b1="",b2="";
let bisex =
!(annee[k]%4) && (!(annee[k]%400) || (annee[k]%100))
? "<u>B</u><br>*"
: "<strike>N</strike>"
if((((annee[k]/100)-Math.round(annee[k]/100)).toFixed(2)) == 0.10 )
{ b1="<b>";b2="</b>" }
ta[0].innerHTML+=(b1+annee[k]+" = "+bisex+b2+" | ")
if((((annee[k]/100)-Math.round(annee[k]/100)).toFixed(2)) == 0.10 ){
ta[0].innerHTML +=
"("+annee[k]+" % 4 = "+annee[k]%4+")<br>"+".".repeat(5)
}
}
</SCRIPT>
Une version similaire utilisant la méthode « Array . forEach ( ) » :
<div style="size='100pt';width='50'" class="tCl"></div>
<SCRIPT> "use strict";
let ta = document.getElementsByClassName("tCl")
let annee=[0,1,4,8,10,16,20,40,100,110,200,210,300,310,320,
400,410,420,510,610,710,810,910,1000,1010,1020,1990,
2000,2010,2020,2110,2210,2310,2410,2500,2510,2610,
3000,3010,3510,3610,4000,4010,4020,4050,4060,
5000,5010,5050,6000,6010,6030];
annee.forEach(function(it){
let b1="",b2="";
let bisex =
!(it%4) && (!(it%400) || (it%100))
? "<u>B</u><br>*"
: "<strike>N</strike>"
if((((it/100)-Math.round(it/100)).toFixed(2)) == 0.10 )
{ b1="<b>";b2="</b>" }
ta[0].innerHTML+=(b1+it+" = "+bisex+b2+" | ")
if((((it/100)-Math.round(it/100)).toFixed(2)) == 0.10 ){
ta[0].innerHTML +=
"("+it+" % 4 = "+it%4+")<br>"+".".repeat(5)
}
vendredi 31 mai 2019
-22/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
});
</SCRIPT>
Toutes les années multiples de « 10 » mais non multiples
de « 4 » ne sont [apparemment et naturellement] jamais
bissextiles .
Objet Style
HTMLStyleElement
Spécifie le style pour des éléments HTML. Les propriétés et méthodes de l’objet
permettent d’implémenter des feuilles de styles DHTML 3 CSS (Dynamic
HTML) avec Javascript.
Méthodes de l’objet Style :
borderWidths , margins , paddings
Propriétés de l’objet Style :
Défini comme ceci par W3C : "Dynamic HTML is a term used by some vendors to describe the combination of
HTML, style sheets and scripts that allows documents to be animated”. (Terme marketing utilisé par Netscape et
Microsoft à partir de NetScape 4.x et Internet Explorer 4.x).
3
vendredi 31 mai 2019
-23/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
align , backgroundColor , backgroundImage , borderBottomWidth ,
borderColor , borderLeftWidth , borderRightWidth , borderStyle ,
borderTopWidth , clear , color , display , fontFamily , fontSize ,
fontStyle , fontWeight , lineHeight , listStyleType , marginBottom
, marginLeft , marginRight , marginTop , paddingBottom , paddingLeft , paddingRight , paddingTop , textAlign , textDecoration ,
textIndent , textTransform , whiteSpace , width
<body>
<input style="width:450" name=dum value="Text Dummy pour illustration">
</body>
<script>
confirm("Allez")
dum.style.textAlign="right";
dum.style.width="300";
dum.style.backgroundColor="red";
dum.style.color="yellow";
dum.style.fontWeight="900";
dum.style.textTransform="uppercase";
</script>
On peut aussi utiliser des propriétés pour spécifier un style :
Quelques exemples.
<STYLE> DIV.layout { layout-grid-line : 10cm }</STYLE>
<DIV CLASS = "layout">Échantillon de texte.</DIV>
<STYLE> DIV.layout { layout-grid-char : auto } </STYLE>
<DIV CLASS = "layout">Essai de layout-grid-char.</DIV>
<STYLE> DIV.layoutvi { layout-flow : vertical-ideographic } </STYLE>
<DIV CLASS = "layoutvi">Texte d'essai de <b>layout-grid-char : verticalideographic</b>. On peut aller très loin</DIV>
<STYLE> DIV.layouth { layout-flow : horizontal } </STYLE>
<DIV CLASS = "layouth">Texte d'essai de <b>layout-gridchar : horizontal</b>. On peut aller très loin</DIV>
<STYLE>
#layout { layout-grid : both fixed 30px 30px }
p {line-height:30px;letter-spacing:30px}
</STYLE>
<p id="layout">Premier Texte de démonstration : layout-grid.</p>
<p>Deuxième Texte de démonstration : style.</p>
vendredi 31 mai 2019
-24/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Rem. :
On peut gérer les propriétés en dehors de l’Object Style (propriété JS) avec
l’attribut style des balises HTML (voir le volume sur le HTML) :
object.style.fontVariant [ = valVariant ]
ou
<balise style='background-color : "value"' />
Une Liste de styles :
azimuth , background-attachment , background-color , backgroundimage , background-position , background-repeat , background , border-bottom-color , border-bottom-style , border-bottom-width , border-bottom , border-collapse , border-color , border-left-color ,
border-left-style , border-left-width , border-left , border-rightcolor , border-right-style , border-right-width , border-right ,
border-spacing , border-style , border-top-color , border-top-style
, border-top-width , border-top , border-width , border , bottom ,
caption-side , clear , clip , color , content , counter-increment ,
counter-reset , cue-after , cue-before , cue , cursor , direction ,
display , elevation , empty-cells , float , font-family , fontsize-adjust , font-size , font-stretch , font-style , font-variant
, font-weight , font , height , left , letter-spacing , line-height
, list-style-image , list-style-position , list-style-type , liststyle , margin-bottom , margin-left , margin-right , margin-top ,
margin , marker-offset , marks , max-height , max-width , minheight , min-width , orphans , outline-color , outline-style , outline-width , outline , overflow , padding-bottom , padding-left ,
padding-right , padding-top , padding , page-break-after , pagevendredi 31 mai 2019
-25/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
break-before , page-break-inside , page , pause-after , pausebefore , pause , pitch-range , pitch , play-during , position ,
quotes , richness , right , size , speak-header , speak-numeral ,
speak-punctuation , speak , speech-rate , stress , table-layout ,
text-align , text-decoration , text-indent , text-shadow , texttransform , top , unicode-bidi , vertical-align , visibility ,
voice-family , volume , white-space , widows , width , word-spacing
, z-index
Named Colors Supported by Microsoft® Internet Explorer 4.0
On peut spécifier les couleurs de deux façons :
— par le nom de la couleur, ou
— par un nombre précédé ou pas d’un signe optionnel de dièse et suivi de trois
couples de nombres hexadécimaux chaque couple représentant respectivement
la saturation du rouge, du vert et du bleu (red-green-blue =RGB), correspondant à l’intensité de chaque couleur respective, FF étant le maximum et 00 le
minimum (<HR COLOR="#FF0000"> = rouge = <HR COLOR="FF0000">), permettant de représenter virtuellement 260*260*260 = 16’777’215 couleurs différentes, mais en pratique ce nombre dépend des performances de votre système
d’affichage qui peut bien se limiter à 16 couleurs différentes.
Quand dans tous les trois couples de couleurs les deux éléments du couple sont
identiques, on peut se contenter de représenter la couleur avec un seul chiffre
hexadécimal par couple / couleur.
<div style="height:50;background:#FFCC88"></div>
<div style="height:50;background:#FC8"></div>
<div style="border:solid;height:50;background:#FFCC88"></div>
<div style="border:solid;height:50;background:#FC8"></div>
vendredi 31 mai 2019
-26/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Voici les 140 couleurs nommées supportées par Microsoft® Internet Explorer
4.0 (pas nécessairement compatible avec d’autres surfeurs).
NAME
ALICEBLUE
AQUA
AZURE
BISQUE
BLANCHEDALMOND
BLUEVIOLET
BURLYWOOD
CHARTREUSE
CORAL
CORNSILK
CYAN
DARKCYAN
DARKGRAY
DARKKHAKI
DARKOLIVEGREEN
DARKORCHID
DARKSALMON
DARKSLATEBLUE
DARKTURQUOISE
DEEPPINK
DIMGRAY
FIREBRICK
FORESTGREEN
GAINSBORO
GOLD
GRAY
GREENYELLOW
HOTPINK
INDIGO
KHAKI
LAVENDERBLUSH
vendredi 31 mai 2019
RGB Value
#F0F8FF
#00FFFF
#F0FFFF
#FFE4C4
#FFEBCD
#8A2BE2
#DEB887
#7FFF00
#FF7F50
#FFF8DC
#00FFFF
#008B8B
#A9A9A9
#BDB76B
#556B2F
#9932CC
#E9967A
#483D8B
#00CED1
#FF1493
#696969
#B22222
#228B22
#DCDCDC
#FFD700
#808080
#ADFF2F
#FF69B4
#4B0082
#F0E68C
#FFF0F5
NAME
ANTIQUEWHITE
AQUAMARINE
BEIGE
BLACK
BLUE
BROWN
CADETBLUE
CHOCOLATE
CORNFLOWER
CRIMSON
DARKBLUE
DARKGOLDENROD
DARKGREEN
DARKMAGENTA
DARKORANGE
DARKRED
DARKSEAGREEN
DARKSLATEGREY
DARKVIOLET
DEEPSKYBLUE
DODGERBLUE
FLORALWHITE
FUCHIA
GHOSTWHITE
GOLDENROD
GREEN
HONEYDEW
INDIANRED
IVORY
LAVENDER
LAWNGREEN
-27/54-
RGB Value
#FAEBD7
#7FFFD4
#F5F5DC
#000000
#0000FF
#A52A2A
#5F9EA0
#D2691E
#6495ED
#DC143C
#00008B
#B8860B
#006400
#8B008B
#FF8C00
#8B0000
#8FBC8B
#2F4F4F
#9400D3
#00BFFF
#1E90FF
#FFFAF0
#FF00FF
#F8F8FF
#DAA520
#008000
#F0FFF0
#CD5C5C
#FFFFF0
#E6E6FA
#7CFC00
17:47:57
JAVASCRIPT && ALGORITHMIQUE
LEMONCHIFFON
#FFFACD
LIGHTBLUE
LIGHTCORAL
#F08080
LIGHTCYAN
LIGHTGOLDENRODYELLOW #FAFAD2
LIGHTGREEN
LIGHTGREY
#D3D3D3
LIGHTPINK
LIGHTSALMON
#FFA07A
LIGHTSEAGREEN
LIGHTSKYBLUE
#87CEFA
LIGHTSLATEGRAY
LIGHTSTEELBLUE
#B0C4DE
LIGHTYELLOW
LIME
#00FF00
LIMEGREEN
LINEN
#FAF0E6
MAGENTA
MAROON
#800000
MEDIUMAQUAMARINE
MEDIUMBLUE
#0000CD
MEDIUMORCHID
MEDIUMPURPLE
#9370DB
MEDIUMSEAGREEN
MEDIUMSLATEBLUE
#7B68EE
MEDIUMSPRINGGREEN
MEDIUMTURQUOISE
#48D1CC
MEDIUMVIOLETRED
MIDNIGHTBLUE
#191970
MINTCREAM
MISTYROSE
#FFE4E1
MOCCASIN
NAVAJOWHITE
#FFDEAD
NAVY
OLDLACE
#FDF5E6
OLIVE
OLIVEDRAB
#6B8E23
ORANGE
ORANGERED
#FF4500
ORCHID
PALEGOLDENROD
#EEE8AA
PALEGREEN
PALETURQUOISE
#AFEEEE
PALEVIOLETRED
PAPAYAWHIP
#FFEFD5
PEACHPUFF
PERU
#CD853F
PINK
PLUM
#DDA0DD
POWDERBLUE
PURPLE
#800080
RED
ROSYBROWN
#BC8F8F
ROYALBLUE
SADDLEBROWN
#8B4513
SALMON
SANDYBROWN
#F4A460
SEAGREEN
SEASHELL
#FFF5EE
SIENNA
SILVER
#C0C0C0
SKYBLUE
SLATEBLUE
#6A5ACD
SLATEGRAY
SNOW
#FFFAFA
SPRINGGREEN
STEELBLUE
#4682B4
TAN
TEAL
#008080
THISTLE
TOMATO
#FF6347
TURQUOISE
VIOLET
#EE82EE
WHEAT
WHITE
#FFFFFF
WHITESMOKE
YELLOW
#FFFF00
YELLOWGREEN
vendredi 31 mai 2019
-28/54-
#ADD8E6
#E0FFFF
#90EE90
#FFB6C1
#20B2AA
#778899
#FFFFE0
#32CD32
#FF00FF
#66CDAA
#BA55D3
#3CB371
#00FA9A
#C71585
#F5FFFA
#FFE4B5
#000080
#808000
#FFA500
#DA70D6
#98FB98
#DB7093
#FFDAB9
#FFC0CB
#B0E0E6
#FF0000
#4169E1
#FA8072
#2E8B57
#A0522D
#87CEEB
#708090
#00FF7F
#D2B48C
#D8BFD8
#40E0D0
#F5DEB3
#F5F5F5
#9ACD32
17:47:57
JAVASCRIPT && ALGORITHMIQUE
On peut gérer les sélections :
<head>
<script type="text/javascript">
function fconcat(){
tmp=""
var d=document.getElementById("isel");
tmp +=
'document.getElementById = ' +
document.getElementById + "\n" +
'd=document.getElementById("isel") = ' +
document.getElementById("isel") + "\n" +
'document.getElementById("isel").length='+
document.getElementById("isel").length+"\n"
var idx=d.selectedIndex
tmp += 'idx=d.selectedIndex = ' +
d.selectedIndex + "\n"
var o=d.options;
tmp += 'o=d.options = ' +
d.options + "\n"
var option=o[idx];
tmp += 'option=d.options[idx] = ' +
d.options[idx] + "\n"
var texte=o[idx].text;
tmp +=
'texte=d.options[d.selectedIndex].text='+
d.options[d.selectedIndex].text + "\n"
document.getElementById("dest").value+=texte
alert(tmp)
}
</script>
</head>
<body>
<form>
Dialing number:<br />
<select id="isel">
<option>1</option><option>2</option>
<option>3</option><option>4</option>
<option>5</option><option>6</option>
<option>7</option><option>8</option>
<option>9</option><option>0</option>
</select>
<input type="button"
onclick="fconcat()" value="Add">
<input type="text" id="dest" size="10">
</form>
</body>
vendredi 31 mai 2019
-29/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
On peut gérer les fontes (polices) :
<style>span {font-variant:small-caps}</style>
<P STYLE='font-variant:"small-caps"'
onclick="this.style.fontVariant='normal'">inline scripting
<DIV onmousedown="this.style.fontVariant='small-caps'">
texte en minuscule</DIV>
<span id="iSp">texte en majuscule</span>
<script>
if(confirm("minimiser ?"))
document.getElementById("iSp").style.fontVariant = "normal"
</script>
INLINE SCRIPTING
inline scripting
texte en minuscule
TEXTE EN MINUSCULE
TEXTE EN MAJUSCULE
texte en majuscule
On peut gérer les listes:
<script>
k=m=4;
function fInsert() {
var oLnewItem = document.createElement("LI");
oList.children(0).insertAdjacentElement("BeforeBegin",oLnewItem)
oLnewItem.innerText = "LI "+m--;
alert("firstChild = "+oList.firstChild.innerHTML+"\n")
}
function fAppend() {
var oLnewItem = document.createElement("LI");
oList2.children(2).insertAdjacentElement("AfterEnd",oLnewItem);
oLnewItem.innerText = "LI "+k++;
alert("lastChild = "+oList2.lastChild.innerHTML+"\n") }
</script>
<body>
<ol id = "oList" start=5><li>LI 5</li><li>LI 6</li><li>LI 7</li></ol>
<input type = "button" value = "Insert Item" onclick="fInsert()">
<ol id = "oList2" start=5><li>LI 1</li><li>LI 2</li><li>LI 3</li></ol>
<input type = "button" value = "Append Item" onclick="fAppend()">
</body>
vendredi 31 mai 2019
-30/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Après 3 clicks sur
chaque bouton
On peut gérer les attributs :
<SCRIPT>
function f_getNamedItem() {
var oAttrCollection = oElem.attributes;
var oAttr = oAttrCollection.getNamedItem ("align");
oAttr.value=prompt(
"Donnez le nouvel attribut ALIGN (Ancien attribut ALIGN =) ", oAttr.value);
nd=window.open()
tmp =fget(oAttrCollection,"id")
tmp+=fget(oAttrCollection,"align")
tmp+=fget(oAttrCollection,"name")
tmp+=fget(oAttrCollection,"bgcolor")
nd.document.write(tmp)
}
function fget(c,p){
</SCRIPT>
</HEAD>
return c.getNamedItem (p).value+"<br>" }
<BODY ONLOAD="f_getNamedItem()">
<DIV ID="oElem" NAME="n_oElem" ALIGN="right" BGCOLOR="red">Texte</DIV>
</BODY>
vendredi 31 mai 2019
-31/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Des propriétés avancées seront objets des prochains volumes :
Exemple1 :
<script>var t=""</script>
<p id=pId>Texte initial à changer.</P>
<BUTTON onclick="t=pId.innerText ;
pId.innerText ='Hey! Il a changé!'">
Remplacer</BUTTON>
<BUTTON onclick="pId.innerText =t">Reset</BUTTON>
Exemple2 :
<head>
<script type="text/javascript">
function dact(){document.getElementById("mySelect").disabled=true; }
function act(){ document.getElementById("mySelect").disabled=false; }
</script>
</head>
<body>
<form>
<select id="mySelect">
<option>Voyage</option>
<option>Lecture</option>
<option>Sport</option>
<option>Ciné</option>
</select>
<br /><br />
<input type="button" onclick="dact()"value="Désactiver la Liste">
<input type="button" onclick="act()"value="Activer la Liste">
</form>
</body>
vendredi 31 mai 2019
-32/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Objet Form
L’objet Form permet de gérer les balises Form. La définition de l’objet Form se
fait selon la syntaxe HTML habituelle :
<form> . . . </form>
Tout formulaire créé est automatiquement enregistré dans la table des Forms.
Ainsi, les formulaires peuvent être accédés par leur index (ordre de création) :
Propriétés de l’objet Form :
action, elements, encoding, length, method, name, target
Méthodes de l’objet Form :
handleEvent , reset , submit
Quelques Événements (« onMachinTruc ») pour l’objet Form :
onabort, onanimationcancel, onanimationend, onanimationiteration, onanimationstart,
onauxclick, onblur, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncontextmenu,
oncopy, oncut, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, ongotpointercapture, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadend, onloadstart, onlostpointercapture, onmousedown, onmouseenter,
onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmozfullscreenchange,
onmozfullscreenerror, onpaste, onpause, onplay, onplaying, onpointercancel, onpointerdown,
onpointerenter, onpointerleave, onpointermove, onpointerout, onpointerover, onpointerup, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onselectstart,
vendredi 31 mai 2019
-33/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
onshow, onstalled, onsubmit, onsuspend, ontimeupdate, ontoggle, ontransitioncancel, ontransitionend, ontransitionrun, ontransitionstart, onvolumechange, onwaiting, onwebkitanimationend, onwebkitanimationiteration, onwebkitanimationstart, onwebkittransitionend, onwheel
<body>
<form name="f2n" id="f2i">
<input type="text" size=6 name="i1" id="i1" value="hello">
<input type=submit>
</form>
<form name="f1n" id="f1i"></form> <form name="f3n" id="f3i"></form>
</body>
<script>
function ftest() {
document.write(document.forms.length+"<br>")
for(k in document.forms)
document.write(document.forms[k].name+"<br>")
document.write("<br>"+document.forms.length+"<br>")
for(k=0;k<document.forms.length;k++)
document.write(document.forms[k].id+"<br>")
alert(document.f2n.i1.value)
if (document.f2n.i1.value.length != 4){
alert("Longueur != 4 caractères ")
document.f2n.i1.value="invalide"
}
}
document.forms[1].onSubmit=ftest()
</script>
Objet window
L’élément le plus important de la programmation Internet c’est la fenêtre (qui
affiche la page Web). Window est un Objet de niveau supérieur pour chaque
objet document, Location et History.
Les propriétés self et window sont synonymes pour référencer la fenêtre en
cours : window.method() = self.method(). Window étant au sommet de la
hiérarchie des objets on peut écrire directement close(), alert(), confirm(),
prompt()… au lieu de window.close()…
Les propriétés top et parent sont aussi synonymes et évoquent le nom de la fenêtre. top réfère la fenêtre principale du navigateur et parent réfère une fenêtre contenant un élément <FRAMESET>.
vendredi 31 mai 2019
-34/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Quelques Méthodes de l’objet Window :
alert , atob , back , blur , btoa , captureEvents , clearInterval ,
clearTimeout , close , confirm , crypto.random , crypto.signText ,
disableExternalCapture , enableExternalCapture , find , focus ,
forward , handleEvent , home , moveBy , moveTo , open , print ,
prompt , releaseEvents , resizeBy , resizeTo , routeEvent , scroll
, scrollBy , scrollTo , setHotKeys , setInterval , setResizable ,
setTimeout , setZOptions , stop
Quelques Propriétés de l’objet Window:
closed , crypto , defaultStatus , document , frames , history , innerHeight , innerWidth , length , location , locationbar , menubar
, name , offscreenBuffering , opener , outerHeight , outerWidth ,
pageXOffset , pageYOffset , parent , personalbar , screenX ,
screenY , scrollbars, self, status, statusbar, toolbar, top, window
Quelques Événéments de l’objet Window:
onabort, onabsolutedeviceorientation, onafterprint, onanimationcancel, onanimationend, onanimationiteration, onanimationstart,
onauxclick, onbeforeprint, onbeforeunload, onblur, oncanplay,
oncanplaythrough, onchange, onclick, onclose, oncontextmenu, ondblclick, ondevicelight, ondevicemotion, ondeviceorientation,
ondeviceproximity, ondrag, ondragend, ondragenter, ondragexit,
ondragleave, ondragover, ondragstart, ondrop, ondurationchange,
onemptied, onended, onerror, onfocus, ongotpointercapture, onhashchange, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onlanguagechange, onload, onloadeddata, onloadedmetadata, onloadend, onloadstart, onlostpointercapture, onmessage, onmessageerror, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmozfullscreenchange, onmozfullscreenerror,
onoffline, ononline, onpagehide, onpageshow, onpause, onplay, onplaying, onpointercancel, onpointerdown, onpointerenter, onpointerleave, onpointermove, onpointerout, onpointerover, onpointerup,
onpopstate, onprogress, onratechange, onreset, onresize, onscroll,
onseeked, onseeking, onselect, onselectstart, onshow, onstalled,
onstorage, onsubmit, onsuspend, ontimeupdate, ontoggle, ontransitioncancel, ontransitionend, ontransitionrun, ontransitionstart,
onunload, onuserproximity, onvolumechange, onvrdisplayactivate,
onvrdisplayconnect, onvrdisplaydeactivate, onvrdisplaydisconnect,
onvrdisplaypresentchange, onwaiting, onwebkitanimationend, onwebkitanimationiteration, onwebkitanimationstart, onwebkittransitionend, onwheel
Voici comment créer/ouvrir/fermer une fenêtre (les valeurs des propriétés peuvent être « yes » ou « no » ou « 1 » ou « 0 ») :
vendredi 31 mai 2019
-35/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
<script>
fen=window.open(
"https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-Creation",
"nom_sans_espace",
"resizable=no,
width=250, height=80,
scrollbars=yes, toolbar=no, status=no, menubar=no,
location=1,
directories=no");
</script>
L’opérateur with avec l’objet window :
<script>
fen=window.open("","",
"resizable=yes,width=40,height=10")
with(fen) document.write('avec "with(fen)"<br>')
fen.document.write('sans "with" avec "fen"<br>')
document.write('sans "with" sans "fen"<br>')
</script>
Écrire un script qui écrit un script dans un document:
<script>
fen=window.open( "","nom_sans_espace","resizable=no,"+
"width=250,height=80,scrollbars=yes,toolbar=no,"+
"status=no, menubar=no,location=1,directories=no")
fen.document.write("<scr\ipt>document.write(Math.PI)</scr\ipt>")
if(confirm("Fermer ?")) fen.close()
</script>
Écrire un code qui écrit dans l’élément <body></body> :
vendredi 31 mai 2019
-36/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
C’est l’occasion aussi d’illustrer une « littérale de chaîne » ou « template strings »
ou « template literals » ou « modèles de libellés » ou « libellés de chaînes de caractères » ou « gabarits de chaînes de caractères ».
Ce sont des chaînes de caractères (strings) qui s’utilisent comme des chaînes ordinaires (celles délimitées par des guillemets [doubles] ou des apostrophes =
guillemets simples), mais dans lesquelles on peut utiliser et mélanger librement
des guillemets et apostrophes, manipuler des variables, paramètres formels, expressions et formules, appeler des fonctions,… bref tout ce qui retourne une
valeur et ce, sans opération de concaténation.
Il ne faut pas confondre les « littérales de chaîne » avec la « chaîne de format » des langages C)
C’est un peu plus difficile à obtenir que les guillemets et apostrophes, mais il
paraît plus logique et plus intéressant de ne plus utiliser que le « ` » comme délimiteurs des chaînes de caractères à la place des guillemets ou apostrophes.
La syntaxe d’une « littérale de chaîne » est la suivante :
${ nom_variable | nom_paramètre_formel | expression | fonction }.
`` : = paire de back-tick (accent grave simple, <ALT-7>-<Barre d’espacement> ou
ASCII 96 ou « ` » ou « 0x60 » ou « ` ») introduit la littérale de chaîne (ou
template strings).
$ : introduit une variable dans la littérale de chaîne,
{} : = placeholder = espace réservé. Délimitent la chaîne à substituer (interpolation
d’expression) qui peut représenter
I. le nom d’une variable ou d’un paramètre formel.
II. une expression à évaluer.
III. un ou plusieurs appels de fonction.
Les $ et {} ne sont nécessaires que quand on doit introduire une variable, une
expression , ou une formule à calculer…
Attention, le back-tick (accent grave simple) est une fonctionnalité JavaScript
non encore reconnue par HTML/DOM.
vendredi 31 mai 2019
-37/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
<body></body>
<script> "use strict";
let f = (nom,matr) =>
`<div style=background:navy;color:red;font-size:16pt>
Notre DIV</div>
Bonjour, Mme/Mlle,M. « ${nom} » Matr: « ${matr} ».`;
document.body.innerHTML =f("Elaka",2018);
</script>
Liste non exhaustive de quelques Méthodes et propriétés de l’objet window :
history (window.history)
window.history.back([pDistance])
window.history.back() - JavaScript 1.5
window.history.forward()
window.history.go(vLocation)
window.history.go(n|'url') - JavaScript 1.5
Propriétés : window.history
- - - - - - - - - - - - - window.history.length
window.history.current - JavaScript 1.5
window.history.next - JavaScript 1.5
window.history.previous - JavaScript 1.5
location (window.location)
window.location.assign(sURL)
window.location.reload(forceGet)
window.location.replace("URL")
Propriétés : window.location
- - - - - - - - - - - - - window.location.hash
window.location.host
window.location.hostname
window.location.href
window.location.pathname
window.location.port
window.location.protocol
window.location.search
Commandes pour rafraîchir la page en cours ou la remplacer :
history.go(0)
location.href=history.go(0)
vendredi 31 mai 2019
-38/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
window.location=location.href
window.location.href=window.location
window.location.reload();
window.location="diasmirehsf.html"
window.location.replace("diasmirevfbc.html")
window.location.replace(window.location)
Objet Function
Fondamentalement, une fonction est un objet, et un objet est une fonction : on
crée un objet à partir d’une fonction, et on appele l’objet constructeur en tant
que fonction. Mais, soit...
Un des objets le plus important c’est l’objet Function qui réserve une adresse
mémoire devant contenir une chaîne [de caractères] représentant du code Javascript devant être traité et exécuté ("compilé") (=bloc de code nommé, logé à
une adresse, et pouvant retourner une valeur). Ces objets (Function) sont évalués à chaque fois qu'ils sont appelés (on leur passe le contrôle). L’objet Function crée une fonction (bloc de code) anonyme mais ayant une adresse mémoire
précise.
Par exemple pour désactiver (ou modifier) l’action du bouton droit de la souris
<script type="text/javascript">
document.oncontextmenu = function() {
alert("click droit de la souris")
return false
}
</script>
Syntaxe générale :
cibleFonction = new Function ([arg1, arg2, ... argn], corpsFonction)

l’objet « Function » cibleFonction (cible de la fonction), est le nom d'une
variable ou une propriété d'un objet existant ou un objet suivi d'un événement,
tel que window.onError.

arg1, arg2, ... argn sont des arguments de type chaîne.
vendredi 31 mai 2019
-39/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE

corpsFonction (corps de la fonction) est une chaîne de caractères spécifiant le code Javascript devant être compilé.
Quelques propriétés de Function :
arguments , arguments.callee , arguments.caller , arguments.length
, arity , caller , constructor , length (Function) , prototype
Quelques Les méthodes de Function:
apply , call , toSource , toString , valueOf , …
Pour éviter des erreurs de temps d’exécution de type « undefined » lors de
l’utilisation d’un paramètre / argument vide, on peut l’utiliser avec un OR conditionnel pour créer une valeur par défaut pour ce paramètre, comme cidessous :
<SCRIPT LANGUAGE="JavaScript">
vendredi 31 mai 2019
5
-40/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
f=function(p){ return p||0 }
0
5
undefined
d=function(p){ return p }
document.write(f(5)+"<br>")
document.write(f()+"<br>")
document.write(d(5)+"<br>")
document.write(d())
</SCRIPT>
On peut utiliser le mot-clé « arguments » qui désigne l’Array dans laquelle sont
stockés tous les arguments d’appel d’une fonction, et qui permet de gérer ces
arguments / paramètres passés à cette fonction appelée :
<SCRIPT LANGUAGE="JavaScript">
tmp=''
f=function(p){
if(arguments.length==0) tmp+="f"
else if(typeof(arguments[1])!="undefined")
tmp+=arguments[1] + "*"
else if(typeof(arguments[0])!="undefined")
tmp+=p+"**"
// ...
tmp+="\n";
return
}
f(5) ;
f("ehop",2009) ;
f() ;
alert(tmp)
</SCRIPT>
On peut tester le type de l’argument passé ; « undefined » signifie vide :
<SCRIPT LANGUAGE="JavaScript">
tmp=''
f=function(p){
if(typeof(p)=="undefined") tmp+="f"
else tmp+=p
// ...
tmp+=" ";
return
}
f(5) ;
f() ;
alert(tmp)
</SCRIPT>
vendredi 31 mai 2019
-41/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Différents typeof sont testés comme ci-dessous :
<script type="text/javascript"> "use strict";
function isAlien(a) {
console.log("isObject(a) =",isObject(a));
console.log("a.constructor' =", a.constructor);
console.log("a.constructor != 'function' =",
a.constructor != 'function');
return isObject(a)
&&
typeof a.constructor != 'function';
}
function isArray(a) {
return isObject(a) && a.constructor == Array;
}
function isBoolean(a) {
return typeof a == 'boolean';
}
function isEmpty(o) {
var i, v;
if (isObject(o)) {
for (i in o) {
v = o[i];
if (isUndefined(v) && isFunction(v)) return false;
}
}
return true;
}
function isFunction(a) {
return typeof a == 'function';
}
function isNull(a)
{
return typeof a == 'object' && !a;
}
function isNumber(a) {
return typeof a == 'number' && isFinite(a);
}
function isObject(a) {
return (a && typeof a == 'object') || isFunction(a);
}
function isString(a) {
return typeof a == 'string';
}
function isTag(a)
{
return a.nodeType && a.nodeType ==1;
}
vendredi 31 mai 2019
-42/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
function isUndefined(a) {
return typeof a == 'undefined';
}
console.log("isAlien(5) =",isAlien(5));
</script>
Dans JS on peut définir une fonction simplement comme dans le C standard,
avec la différence que 1. on ne spécifie pas son type [de retour] et 2. on spécifie
explicitement le type (tout en minuscule) de l’objet « function » (voir aussi « objet Function » p. 39).
Pour une bonne convenance et pour les avoir ensemble, on peut aussi regrouper des [définitions de] fonctions dans un bloc [factice] de fonctions. Bien entendu, comme c'est un BLOC [de fonctions], les fonctions définies dans ce bloc
ne seront visibles que du sein de ce bloc (elles ont une portée de bloc). La syntaxe pour regrouper les fonctions ensemble est :
(function() { déf ou code ou corps fct } ) ()
vendredi 31 mai 2019
-43/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
<script>
var tmp=""
function a(c){
return c!=null?'"'+c+'"':'"null"'
}
function b(){
h=new Date() ;
return h.toLocaleString()
}
alert(a(15)+"\n"+a()+"\n"+b())
</script>
<script>
(function() {
var tmp=""
function a(a) {
return a!=null?'"'+a+'"':'"null"'
}
function b(){
h=new Date() ;
return h.toLocaleString()
}
alert(a(15)+"\n"+a()+"\n"+b())
})();
</script>
La fonction « escape » convertit des caractères non alpha-numériques, des caractères de contrôle (ASCII 1-31), en leurs codes numériques hexadécimales :
<script>
document.write(escape("abcdef &é'(-è_çà)= ABCDEF321"))
</script>
Exécution:
abcdef%20%26%E9%27%28-%E8_%E7%E0%29%3D%20ABCDEF321
À l’inverse, la fonction « unescape » convertit des valeurs numériques (hexadécimales) en caractères :
<script>
document.write(
unescape(
vendredi 31 mai 2019
-44/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
"â&abcdef%20%26%E9%27%28-%E8_%E7%E0%29%3D%20ABCDEF321""
)
)
</script>
Exécution :
â&abcdef &é'(-è_çà)= ABCDEF321"
On accentue les caractères comme ceci, en un seul mot :
« ampersand (&) caractère (c) commande point-virgule »,
« Á »
donne « Á »
Les différentes commandes disponibles sont :
acute, cedil, circ, grave, lig, rdm, slash, tilde, uml
<div id="did"></div>
<script> "use strict";
let tmp="",
ast = `${"*".repeat(5)}`,
chr = new Array( "",
"a","c","e","ae","æ","oe","œ","i","o","u","y",
"A","C","E","AE","Æ","OE","Œ","I","O","U","Y","Ð"
)
let len=chr.length,
sp= new Array( "acute","grave","cedil","circ",
"lig","rdm","slash","tilde","uml"
)
for(let m=0, spl=sp.length ; m<spl ; m++) {
tmp += `${ast}
${sp[m].toUpperCase()} ${ast}
<br><br>`;
for(let k=0;k<len;k++) {
let s = `&${chr[k]}${sp[m]};` ;
let t= `&${chr[k]}${sp[m]};`;
tmp+=`[ ${chr[k]} ] => ${s} ${ast}
« &${chr[k]}${sp[m]}; »`;
//
if(t.slice(1)===s.slice(5)) tmp+=` ${".".repeat(3)}`;
tmp+=`<br>`;
}
tmp=`${tmp}<br><br>`;
vendredi 31 mai 2019
-45/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
}
document.getElementById(`did`).innerHTML=tmp;
console.log(tmp);
</script>
Table des caractères accentués :
***** ACUTE *****
[ ] => ´ ***** « ´ »
[ a ] => á ***** « á »
[ c ] => ć ***** « ć »
[ e ] => é ***** « é »
[ ae ] => &aeacute; ***** « &aeacute; »
[ æ ] => &æacute; ***** « &æacute; »
[ oe ] => &oeacute; ***** « &oeacute; »
[ œ ] => &œacute; ***** « &œacute; »
[ i ] => í ***** « í »
[ o ] => ó ***** « ó »
[ u ] => ú ***** « ú »
[ y ] => ý ***** « ý »
[ A ] => Á ***** « Á »
[ C ] => Ć ***** « Ć »
[ E ] => É ***** « É »
[ AE ] => &AEacute; ***** « &AEacute; »
[ Æ ] => &Æacute; ***** « &Æacute; »
[ OE ] => &OEacute; ***** « &OEacute; »
[ Œ ] => &Œacute; ***** « &Œacute; »
[ I ] => Í ***** « Í »
[ O ] => Ó ***** « Ó »
[ U ] => Ú ***** « Ú »
[ Y ] => Ý ***** « Ý »
[ Ð ] => &Ðacute; ***** « &Ðacute; »
***** GRAVE *****
[ ] => ` ***** « ` »
[ a ] => à ***** « à »
[ c ] => &cgrave; ***** « &cgrave; »
[ e ] => è ***** « è »
[ ae ] => &aegrave; ***** « &aegrave; »
[ æ ] => &ægrave; ***** « &ægrave; »
[ oe ] => &oegrave; ***** « &oegrave; »
[ œ ] => &œgrave; ***** « &œgrave; »
[ i ] => ì ***** « ì »
[ o ] => ò ***** « ò »
[ u ] => ù ***** « ù »
vendredi 31 mai 2019
[ y ] => &ygrave; ***** « &ygrave; »
[ A ] => À ***** « À »
[ C ] => &Cgrave; ***** « &Cgrave; »
[ E ] => È ***** « È »
[ AE ] => &AEgrave; ***** « &AEgrave; »
[ Æ ] => &Ægrave; ***** « &Ægrave; »
[ OE ] => &OEgrave; ***** « &OEgrave; »
[ Œ ] => &Œgrave; ***** « &Œgrave; »
[ I ] => Ì ***** « Ì »
[ O ] => Ò ***** « Ò »
[ U ] => Ù ***** « Ù »
[ Y ] => &Ygrave; ***** « &Ygrave; »
[ Ð ] => &Ðgrave; ***** « &Ðgrave; »
***** CEDIL *****
[ ] => ¸ ***** « ¸ »
[ a ] => &acedil; ***** « &acedil; »
[ c ] => ç ***** « ç »
[ e ] => &ecedil; ***** « &ecedil; »
[ ae ] => &aecedil; ***** « &aecedil; »
[ æ ] => &æcedil; ***** « &æcedil; »
[ oe ] => &oecedil; ***** « &oecedil; »
[ œ ] => &œcedil; ***** « &œcedil; »
[ i ] => &icedil; ***** « &icedil; »
[ o ] => &ocedil; ***** « &ocedil; »
[ u ] => &ucedil; ***** « &ucedil; »
[ y ] => &ycedil; ***** « &ycedil; »
[ A ] => &Acedil; ***** « &Acedil; »
[ C ] => Ç ***** « Ç »
[ E ] => &Ecedil; ***** « &Ecedil; »
[ AE ] => &AEcedil; ***** « &AEcedil; »
[ Æ ] => &Æcedil; ***** « &Æcedil; »
[ OE ] => &OEcedil; ***** « &OEcedil; »
[ Œ ] => &Œcedil; ***** « &Œcedil; »
[ I ] => &Icedil; ***** « &Icedil; »
[ O ] => &Ocedil; ***** « &Ocedil; »
[ U ] => &Ucedil; ***** « &Ucedil; »
[ Y ] => &Ycedil; ***** « &Ycedil; »
[ Ð ] => &Ðcedil; ***** « &Ðcedil; »
-46/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
***** CIRC *****
[ ] => ˆ ***** « ˆ »
[ a ] => â ***** « â »
[ c ] => ĉ ***** « ĉ »
[ e ] => ê ***** « ê »
[ ae ] => &aecirc; ***** « &aecirc; »
[ æ ] => &æcirc; ***** « &æcirc; »
[ oe ] => &oecirc; ***** « &oecirc; »
[ œ ] => &œcirc; ***** « &œcirc; »
[ i ] => î ***** « î »
[ o ] => ô ***** « ô »
[ u ] => û ***** « û »
[ y ] => ŷ ***** « ŷ »
[ A ] => Â ***** « Â »
[ C ] => Ĉ ***** « Ĉ »
[ E ] => Ê ***** « Ê »
[ AE ] => &AEcirc; ***** « &AEcirc; »
[ Æ ] => &Æcirc; ***** « &Æcirc; »
[ OE ] => &OEcirc; ***** « &OEcirc; »
[ Œ ] => &Œcirc; ***** « &Œcirc; »
[ I ] => Î ***** « Î »
[ O ] => Ô ***** « Ô »
[ U ] => Û ***** « Û »
[ Y ] => Ŷ ***** « Ŷ »
[ Ð ] => &Ðcirc; ***** « &Ðcirc; »
***** LIG *****
[ ] => &lig; ***** « &lig; »
[ a ] => &alig; ***** « &alig; »
[ c ] => &clig; ***** « &clig; »
[ e ] => &elig; ***** « &elig; »
[ ae ] => æ ***** « æ »
[ æ ] => &ælig; ***** « &ælig; »
[ oe ] => œ ***** « œ »
[ œ ] => &œlig; ***** « &œlig; »
[ i ] => &ilig; ***** « &ilig; »
[ o ] => &olig; ***** « &olig; »
[ u ] => &ulig; ***** « &ulig; »
[ y ] => &ylig; ***** « &ylig; »
[ A ] => &Alig; ***** « &Alig; »
[ C ] => &Clig; ***** « &Clig; »
[ E ] => &Elig; ***** « &Elig; »
[ AE ] => Æ ***** « Æ »
[ Æ ] => &Ælig; ***** « &Ælig; »
vendredi 31 mai 2019
[ OE ] => Œ ***** « Œ »
[ Œ ] => &Œlig; ***** « &Œlig; »
[ I ] => &Ilig; ***** « &Ilig; »
[ O ] => &Olig; ***** « &Olig; »
[ U ] => &Ulig; ***** « &Ulig; »
[ Y ] => &Ylig; ***** « &Ylig; »
[ Ð ] => &Ðlig; ***** « &Ðlig; »
***** RDM *****
[ ] => &rdm; ***** « &rdm; »
[ a ] => &ardm; ***** « &ardm; »
[ c ] => &crdm; ***** « &crdm; »
[ e ] => &erdm; ***** « &erdm; »
[ ae ] => &aerdm; ***** « &aerdm; »
[ æ ] => &ærdm; ***** « &ærdm; »
[ oe ] => &oerdm; ***** « &oerdm; »
[ œ ] => &œrdm; ***** « &œrdm; »
[ i ] => &irdm; ***** « &irdm; »
[ o ] => º ***** « º »
[ u ] => &urdm; ***** « &urdm; »
[ y ] => &yrdm; ***** « &yrdm; »
[ A ] => &Ardm; ***** « &Ardm; »
[ C ] => &Crdm; ***** « &Crdm; »
[ E ] => &Erdm; ***** « &Erdm; »
[ AE ] => &AErdm; ***** « &AErdm; »
[ Æ ] => &Ærdm; ***** « &Ærdm; »
[ OE ] => &OErdm; ***** « &OErdm; »
[ Œ ] => &Œrdm; ***** « &Œrdm; »
[ I ] => &Irdm; ***** « &Irdm; »
[ O ] => &Ordm; ***** « &Ordm; »
[ U ] => &Urdm; ***** « &Urdm; »
[ Y ] => &Yrdm; ***** « &Yrdm; »
[ Ð ] => &Ðrdm; ***** « &Ðrdm; »
***** SLASH *****
[ ] => &slash; ***** « &slash; »
[ a ] => &aslash; ***** « &aslash; »
[ c ] => &cslash; ***** « &cslash; »
[ e ] => &eslash; ***** « &eslash; »
[ ae ] => &aeslash; ***** « &aeslash; »
[ æ ] => &æslash; ***** « &æslash; »
[ oe ] => &oeslash; ***** « &oeslash; »
[ œ ] => &œslash; ***** « &œslash; »
[ i ] => &islash; ***** « &islash; »
[ o ] => ø ***** « ø »
-47/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
[ u ] => &uslash; ***** « &uslash; »
[ y ] => &yslash; ***** « &yslash; »
[ A ] => &Aslash; ***** « &Aslash; »
[ C ] => &Cslash; ***** « &Cslash; »
[ E ] => &Eslash; ***** « &Eslash; »
[ AE ] => &AEslash; ***** « &AEslash; »
[ Æ ] => &Æslash; ***** « &Æslash; »
[ OE ] => &OEslash; ***** « &OEslash; »
[ Œ ] => &Œslash; ***** « &Œslash; »
[ I ] => &Islash; ***** « &Islash; »
[ O ] => Ø ***** « Ø »
[ U ] => &Uslash; ***** « &Uslash; »
[ Y ] => &Yslash; ***** « &Yslash; »
[ Ð ] => &Ðslash; ***** « &Ðslash; »
***** TILDE *****
[ ] => ˜ ***** « ˜ »
[ a ] => ã ***** « ã »
[ c ] => &ctilde; ***** « &ctilde; »
[ e ] => &etilde; ***** « &etilde; »
[ ae ] => &aetilde; ***** « &aetilde; »
[ æ ] => &ætilde; ***** « &ætilde; »
[ oe ] => &oetilde; ***** « &oetilde; »
[ œ ] => &œtilde; ***** « &œtilde; »
[ i ] => ĩ ***** « ĩ »
[ o ] => õ ***** « õ »
[ u ] => ũ ***** « ũ »
[ y ] => &ytilde; ***** « &ytilde; »
[ A ] => Ã ***** « Ã »
[ C ] => &Ctilde; ***** « &Ctilde; »
[ E ] => &Etilde; ***** « &Etilde; »
[ AE ] => &AEtilde; ***** « &AEtilde; »
[ Æ ] => &Ætilde; ***** « &Ætilde; »
[ OE ] => &OEtilde; ***** « &OEtilde; »
[ Œ ] => &Œtilde; ***** « &Œtilde; »
[ I ] => Ĩ ***** « Ĩ »
[ O ] => Õ ***** « Õ »
[ U ] => Ũ ***** « Ũ »
[ Y ] => &Ytilde; ***** « &Ytilde; »
[ Ð ] => &Ðtilde; ***** « &Ðtilde; »
***** UML *****
[ ] => ¨ ***** « ¨ »
[ a ] => ä ***** « ä »
[ c ] => &cuml; ***** « &cuml; »
[ e ] => ë ***** « ë »
[ ae ] => &aeuml; ***** « &aeuml; »
[ æ ] => &æuml; ***** « &æuml; »
[ oe ] => &oeuml; ***** « &oeuml; »
[ œ ] => &œuml; ***** « &œuml; »
[ i ] => ï ***** « ï »
[ o ] => ö ***** « ö »
[ u ] => ü ***** « ü »
[ y ] => ÿ ***** « ÿ »
[ A ] => Ä ***** « Ä »
[ C ] => &Cuml; ***** « &Cuml; »
[ E ] => Ë ***** « Ë »
[ AE ] => &AEuml; ***** « &AEuml; »
[ Æ ] => &Æuml; ***** « &Æuml; »
[ OE ] => &OEuml; ***** « &OEuml; »
[ Œ ] => &Œuml; ***** « &Œuml; »
[ I ] => Ï ***** « Ï »
[ O ] => Ö ***** « Ö »
[ U ] => Ü ***** « Ü »
[ Y ] => Ÿ ***** « Ÿ »
[ Ð ] => &Ðuml; ***** « &Ðuml; »
Objet RegExp
L’objet RegExp, casse sensible sauf quand le flag i (insensible ou ignore) est
spécifié, contient un modèle d’EXPRESSION REGULIERE permettant, via ses propriétés et ses méthodes, d’utiliser l’expression régulière pour effectuer des opérations de recherche / remplacement de chaînes de caractères correspondantes.
Syntaxe :
vendredi 31 mai 2019
-48/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
Une forme littérale texte ou la fonction constructeur RegExp.

Syntaxe forme littérale : /modèle/flags
La paire // délimite le modèle de la RegExp.

Syntaxe fonction constructeur : new RegExp("modèle"[, "flags"])
L’objet Regular Expression contient un modèle d'expression régulière. Ses propriétés et méthodes utilisent l’expression régulière pour effectuer des opérations
de recherche / remplacement de chaînes correspondantes.
Syntaxe:
var regularexpression = /modèle/[switch]
ou
var regularexpression = new RegExp("modèle",["switch"])
Paramètres :
modèle : Le texte ou l’expression régulière.
Avec la première syntaxe, le caractère / délimite le modèle d’expression.
Avec la deuxième, ce sont les guillemets.
switch ou flags
Si spécifié, flags peut avoir une des valeurs suivantes :
 g: correspondance globale
 i:
ignorer la casse
 gi: une combinaison des deux premiers paramètres
Quelques caractères spéciaux pour expressions régulières :
\
Caract
Description
Caractère d’échappement : crée un « Escape sequence » (le prochain carac-
vendredi 31 mai 2019
-49/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
tère est spécial et ne doit pas être traité littéralement).
/b/ correspond au caractère « b ». Avec la barre oblique inversée, /\b/, le caractère est considéré comme spécial.
ou l’inverse,
/a*/ égale 0 ou plusieurs a.
/a\*/ correspond à « a* ».
^
Correspond au début d’une ligne ou d’une entrée.
/^A/ ne correspond pas au ‘A’ dans « ancêtre A » mais oui dans « Ancêtre A ».
$
Correspond à la fin d’une ligne ou d’une entrée.
/t$/ ne correspond pas au ‘t’ dans « âtre », mais tout à fait dans « sept ».
*
Correspond au caractère précédent 0 ou plusieurs fois.
/bê*/ correspond à ‘bêêê’ dans « Mais quelle bêêêtise ».
+
Correspond au caractère précédent 1 ou plusieurs fois.
/a+/ correspond au 'a' dans « partie » et à tous les ‘a’ dans « paaas du tout »
?
Correspond au caractère précédent 0 ou 1 fois.
/e?le?/ correspond à 'el' dans « antigel » et à 'le' dans « angle ».
.
Le point = tout caractère unique exception faite du caractère nouvelle ligne.
/.n/ ≈ 'an' et 'on' dans « Son père vient d’annoncer la date des vacances ».
(x)
Correspond à 'x' (x = toute expression, conserve la correspondance trouvée).
/(barre)/ correspond et conserve 'barre' dans « barre des tâches. » La chaîne
trouvée peut ensuite être rappelée à partir du tableau des éléments. Voir les
propriétés de l'objet RegExp.
x|y
Correspond à 'x', ou ‘y’ où x et y représentent n’importe quelle expression.
{n}
Où n est un nombre entier positif. Correspond à un nombre fixe
d’occurrences du caractère précédent.
/o{2}/ correspond aux deux ‘o’ dans « cocoon ».
[mxyzq] Un jeu de caractères (character set). Correspond à tout caractère du jeu.
[abcd] ou [a-d].
[^abcd] ou [^a-d] = aucun caractère dans le jeu.
Si le trait-d’union (-) doit faire partie du jeu des caractères, il doit être placé
en dernier, juste avant le crochet de fermeture.
[\b]
Correspond à un retour-arrière (backspace).
\b
Correspond à un espace délimitant un mot (avant ou après un mot).
\cX
Où X est la touche Ctrl.
\d
Un chiffre. [0-9].
\D
Un caractère qui n’est pas un chiffre.
\f
Une feuille.
\n
Une ligne.
\r
Un retour de chariot.
\s
Équivalent de [ \f\n\r\t\v] (équivalents d’espace blanc).
\S
Équivalent de [^ \f\n\r\t\v].
\t
Une tabulation.
\v
Une tabulation verticale.
\w
Tout caractère alphanumérique y compris le caractère de soulignement.
vendredi 31 mai 2019
-50/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
\W
\n
\ooctal
\xhex
N’importe quel caractère qui ne fait pas partie d’un mot. %, 50%
Où n est un nombre entier positif. Fait référence à la dernière chaîne trouvée le parent n dans l’expression régulière.
Où \ooctal = valeur octale d’échappement et \xhex = valeur hexadécimale
d’échappement. Pour inclure du code ASCII dans les expressions régulières.
Une application pratique des RegExp (le trimming) :
<SCRIPT>
var regExpBeg = /^\s+/;
var regExpEnd = /\s+$/;
function trim(sParam) {
return sParam.replace(regExpBeg, "") .
replace(regExpEnd, "");
}
t="
texte initial
"
alert("txt initial = «"+t+"»\n"+
"txt final = «"+trim(t)+"»")
</SCRIPT>
On peut regrouper plusieurs RegExp en une seule :
<script>
function trim(t) {
if (t == null) return '';
return t.replace(/^\s+|\s+$/g, '');
}
v="
BIOS
"
alert("«"+v+"» => «"+trim(v)+"»")
</script>
Analyse :
L’expression régulière (délimitée par les deux //) : « return
t.replace(/^\s+|\s+$/g, ''); » signifie : une séquence comportant en contigu
l’une des chaînes ci-dessous (le « | » sied pour le OU logique) :
Une expression RegExp ne doit pas nécessairement être « umoglyphique » :
<script>
re=/Luyalu/i
n="diasoluka luyalu nzoyifuanga"
alert(
re.test(n) + "\n" +
n.replace(re,"dadet"))
vendredi 31 mai 2019
-51/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
</script>
1°) Existe-t-il la chaîne « Luyalu » dans « n » (/i = casse insensible) = true ; 2°)
Remplacer « Luyalu » (/i) par « dadet » => diasoluka dadet nzoyifuanga
^\s+
Une ou plusieurs fois (le + final) un espace = un des caractères dans
le jeu [ \f\n\r\t\v] ( \s ) en début de ligne ou d’entrée ( ^ )
Un ou plusieurs fois (le +) un espace = un des caractères dans le jeu
[ \f\n\r\t\v] ( \s ) en fin de ligne ou d’entrée ( $ )
L’option ou flag « global » (tout, du début à la fin)
Clôture l’instruction
\s+$
G
;
La suite 4 des RegExp, passionnante et instructive,
dans le prochain volume ●●●
P.S. : Pour réduire les frais d’impression (nombre de pages), la présentation (ventilation) a été
sacrifiée, et ce dans un méli-mélo (chaque page supplémentaire équivaut à au moins 1000
feuilles).
Nos excuses.
Mots-clés :
javascript,string literal,ecmascript,regexp,arrays,string,getElementById,getElementsByName,attributs,lastCh
ild,createElement,insertAdjacentElement,firstChild,fontVariant,selectedIndex,options,obj
ect,typeof,try-catch,anchor,Array, Boolean, Date, Function, Global, Math, Number, Object, RegExp, Regular Expression
4
Mise à jour et version électronique :
[email protected] , +243 - [0]899508675 , [0]851278216 .
vendredi 31 mai 2019
-52/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
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]
Autre Lecture :
https://www.scribd.com/document/374738470/Le-Plus-GrandSecret-de-La-Creation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-Dosage-Des-Medicamentsen-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-DesThermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-Introduction-AuxFonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-PourQuoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelle-angulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriquees-en-JS
• https://www.scribd.com/document/374789297/Format-Interne-Des-ObjetsJavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-LaCreation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMCindice-de-doduite-Selon-Dr-Diasoluka
• https://www.scribd.com/document/373847209/Property-Descriptors
• https://www.scribd.com/document/373833282/l-Objet-Global-Window
• https://www.scribd.com/document/372665249/Javascript-Tome-II
• https://www.scribd.com/document/355291488/motilite-oculaire-2
vendredi 31 mai 2019
-53/54-
17:47:57
JAVASCRIPT && ALGORITHMIQUE
• https://www.scribd.com/document/355291239/motilite-oculaire-I
• https://www.scribd.com/document/355290248/Script-d-Analyses-DesReflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-etAnthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelle-duTraitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-EtType-Respiration
• https://www.scribd.com/document/315746265/Classification-DesMedicaments
• https://www.scribd.com/document/315745909/Incongruences-Heresies-etHeterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-EtType-Respiration
vendredi 31 mai 2019
-54/54-
17:47:57