javascript & algorithmique (3)

Transcription

JAVASCRIPT ET
ALGORITHMIQUE
(A l-Khwârizmî)
N ° I - jeudi 4 avril 2019 (10:46:09 PM)
Pour Débuter
J.B. Dadet. DIASOLUKA Nz. Luyalu
La prétention primaire de cette série est de tremper vos mains [ peut-être pour votre
toute première fois ] dans le langage de programmation Internet « JavaScript »
(démarqué de la forme originale inventée par SUN) en vous enseignant par l’exemple
ses principes et sa puissance avec moult algorithmes pour informa-tiser d’autres
domaines.
L’objectif final de cette série d’opuscules est de motiver tout un chacun à devenir un
crac de la programmation Internet et à l’Algorithmique.
JavaScript est le langage de choix pour le développement de pages Web dynamiques
DHTML (Dynamic HTML) ou HTML DOM (HTML Document Object Model), bien que parfois se comportant contre toute attente.
HTML DOM définit un moyen standard pour accéder à, et manipuler un document HTML, le présentant dans une structure arborisée (tree-structure ou node
tree) comportant éléments, attributs et du texte, par exemple :
 Document
o Root Element : <HTML>
 Element : <Head>
 Element : <Title>
 Text : <Mon Titre>
o Element : <Body>
 Element : <a>
 Attribute : "href"
 Text : "Mon lien"
 Element : <div>
 Text : "Ma division"
Ne ratez aucun numéro : Please, Click for details inside ●●●>
-[0]851278216 -[0]991239212 -[0]899508675 -[0]15149280 -[0]813572818
JAVASCRIPT && ALGORITHMIQUE
MS-JAVASCRIPT & ALGORITHMIQUE
Définition :
JavaScript est un langage orienté objet plus ou moins basé sur le langage C++
dans sa syntaxe, sa logique et ses opérateurs (voir le fascicule sur « les opérateurs spécifiques du langage C++ » du même auteur).
Pour exécuter les exemples contenus dans cette série, vous pouvez saisir le code
source soit
1. dans l’ardoise javascript d’un navigateur, soit
2. dans un fichier [d’extension] *.html ou *.js avec un éditeur de texte gratuit
dont :
 JavaScript :
editlivejava, FJSE, JetBRAIN Intelli J IDEA, eclipse-java-ganymede, jxhtmledit,
scriptomania,
 CSS :
topstyle, css_editor, EngInSite CSS Editor, RapidCSS ,
 Perl :
ActivePerl, DzPERL, perl-studio, ou Python…
 PHP :
DzPHP, PHPPRO, PHPXEDIT, php, php_editor_php, phpBB, phpedit, phpmagic,
phpmkr, rapidphp, Top PHP Studio, tphpstudio, Winsyntax ,
 HTML :
BowPad, Sublime Text, EditPlus, EditPad Pro, NotePad++, Crimson ou Emerald
(Emurasoft EmEditor), AkelPad, FocusWriter, UltraEdit, UEStudio, 010 Editor, gedit, jEdit, JetBrains WebStorm, IntelliJ IDEA, Kate, Editra, crisp, Aptana Studio, Atom, Menicucci Editeur, TEdit, ED for Windows, AptEdit, BestAddressHTML, webuild,
Boxertexteditor, CodeLobster, LopeEdit, dida, ConText, SuperEdit, TextPad,
jeudi 4 avril 2019
-2/49-
22:46:09
Brackets, Codelobster PHP, Dynamic HTML Editor, EC_edit, TotalEdit, Araneae,
CoffeeHTML, CuteHTML, WebExpert, AceHTML, HTML Constellation, HtmlEdit,
HTMLEditor, HotHTML, Arachnophilia, MultiEdit (MeLS), HotDog, HippoEdit, prEditor, Pad, PSPad, Htmlpad, NotePad, NotePad2, WebPad, Another Notepad, gsnote,
NoteTab, Stylizer, HandyHTML Studio, GetDiz, FrontPage, Amaya (pas pour le JS),
scHTML, KissHTML, Professional Editor (pred), PurpleEditor, Aurora WebEditor,
Pub, Komodo Edit, kompozer, Nvu, lightPad, mpweb, wzhtml, QuickWeb, Simple
Web, Simple-HTML-Editor, TSWebEditor, Source Editor, Notes SE, Claris Home
Page, EnhancedHTML, ezhtmledit, ezyhtmleditor, CodeSnap, hippou, HypertextBuilder, html2000, HTML Direct, Lambda HTML, LocHTML, html, Sothink HTML,
HTML Editor VB6, HTMLiar, HtmlCodeCleaner, HTMLKit, FreshHTML, CSE HTML Validator, CodeChameleon, Text Hawk, WEB-O-RAMA, webformer, WeBuilder, WebZar,
HB14, TIDY, EditRocket, Visual Studio Code, ou
 XML :
eWebEDIT, cooktop, editml, pebb, pxe, selexml, stylus-studio-enterprise, Xed,
XedPro, XMLFox, xmlnotepad, XMLobjective, XMLSpyEclipse, XMLViewer, XMLwriter, Oxygen XML…
Certains de ces éditeurs excellent par leur aisance à :
1. Manipuler les très gros fichiers de plus de 2 mégas, ou sont
2. Pourvu d’un visualiseur de la miniature de l’ensemble du fichier sur le bord
droit de la fenêtre de l’éditeur qui en le survolant avec la souris, ouvre une
fenêtre pop-up mobile de zoom, permettant de voir le contenu du fichier à
ce niveau, et en cliquant dessus vous ramène à cet endroit dans le fichier.
3. pourvus de la fonctionnalité tri (parfois avec suppression des doublons), ou
4. peuvent supprimer les doublons sans tri, ou permettent d’ouvrir plusieurs
fenêtres [liées] pour un même fichier, ou
5. permettent la recherche [incrémentale] | remplacement dans des fichiers
disques ou tous les fichiers ouverts, ou
6. peuvent écraser (écrire sur) les fichiers en lecture seule, ou
7. permettent les macros, ou
jeudi 4 avril 2019
-3/49-
22:46:09
8. permettent d’insérer automatiquement les balises de formatage gras, italic,
ou souligné comme dans un traitement de texte, ou
9. ferment automatiquement les balises ou mettent en surbrillance les paires de
balises ou simplement la balise sélectionnée, d’autres sont dotés de la
10.
fonctionnalité « auto complétion », d’autres
11. proposent automatiquement une liste d’attributs et leurs valeurs pour la
balise sélectionnée, d’autres brillent par leur
12.
coloration syntactique, ou
13. transmettre la coloration syntactique dans un traitement de texte lors
d’un « copier-coller ».
14. d’autres y transmettent aussi la numérotation des lignes lors du même
« copier-coller ».
15.
la rapidité à se charger soi-même et
la rapidité à charger des très gros fichiers et à naviguer dans ces gros fichiers, d’autres permettent une
16.
17. saisie en WYSIWYG (mode graphique, plus lents) alors que d’autres permettent seulement une
18.
prévisualisation (la saisie plus véloce se fait en mode texte)…
19. Configuration avec le fichier de configuration universelle « EditorConfig ».
Tous ou la plupart sont téléchargeables sur Internet et gratuits : freeware,
cardware ou shareware = durée limitée « d’utilisation gratuite = période
d’essai », mais aucun d’eux ne réunit toutes les qualités reprises ici ou souhaiteés.
jeudi 4 avril 2019
-4/49-
22:46:09
Les PADS par principe ne permettent d’éditer qu’un seul fichier à la fois, mais
beaucoup permettent d’ouvrir et d’éditer plusieurs fichiers à la fois.
Amusons-nous donc un peu avec la mathématique et le JavaScript (ou
JScript ou JS), par exemple le calcul du carré d’un nombre ( n² ) = « somme des
n premiers nombres entiers impairs » : 25 = 5² = 1 + 3 + 5 + 7 + 9.
<script>
for(k=1 ; k<=12 ; k++) {
a=c=cpt=0
for(n=1 ; cpt<k ; n++) {
if(n%2) {
a+=k ; c+=n ; cpt++
}
}
document.write(
"Carré de "+k+" = "+c+" ("+a+")<br>")
}
</script>
Carré
Carré
Carré
Carré
Carré
Carré
Carré
Carré
Carré
Carré
Carré
Carré
de
de
de
de
de
de
de
de
de
de
de
de
1 = 1 (1)
2 = 4 (4)
3 = 9 (9)
4 = 16 (16)
5 = 25 (25)
6 = 36 (36)
7 = 49 (49)
8 = 64 (64)
9 = 81 (81)
10 = 100 (100)
11 = 121 (121)
12 = 144 (144)
c = Somme des n premiers nombres entiers impairs,
a = somme du nombre autant de fois lui-même (carré classique du nombre).
Un programme qui vérifie que la somme de n carrés parfaits consécutifs est
égale à l’expression n ( n + 1 ) ( 2 n + 1 ) / 6 . Rappel : si le dernier chiffre d’un en-
tier est 2, 3, 7 ou 8 ; ou si son résidu est 2, 3, 5, 6 ou 8, l’entier n'est pas un carré.
<script>
c=0 ; tmp="" ; s="" ; t=0
for(m=1 ; m<16 ; m++) {
p= Math.pow(m,2)
c+=p ; tmp+=s+p ; t+=p ; s="+"
if(m*(m+1)*(2*m+1)/6 == c)
document.write(
m + ") " + tmp + " (="+t+") = "+ m + "*(" + m + "+1)*(2*" +
m + "+1)/6 = " + m + "*(" + (m+1) + ")*(" + (2*m+1) +
")/6 = " + m*(m+1)*(2*m+1)/6 +" = "+c+"<br>")
}
</script>
Exécution :
1)
2)
3)
4)
5)
…
1 (=1) = 1*(1+1)*(2*1+1)/6 = 1*(2)*(3)/6 = 1 = 1
1+4 (=5) = 2*(2+1)*(2*2+1)/6 = 2*(3)*(5)/6 = 5 = 5
1+4+9 (=14) = 3*(3+1)*(2*3+1)/6 = 3*(4)*(7)/6 = 14 = 14
1+4+9+16 (=30) = 4*(4+1)*(2*4+1)/6 = 4*(5)*(9)/6 = 30 = 30
1+4+9+16+25 (=55) = 5*(5+1)*(2*5+1)/6 = 5*(6)*(11)/6 = 55 = 55
jeudi 4 avril 2019
-5/49-
22:46:09
14) 1+4+9+16+25+36+49+64+81+100+121+144+169+196 (=1015) = 14*(14+1)*(2*14+1)/6
= 14*(15)*(29)/6 = 1015 = 1015
15) 1+4+9+16+25+36+49+64+81+100+121+144+169+196+225 (=1240) =
15*(15+1)*(2*15+1)/6 = 15*(16)*(31)/6 = 1240 = 1240
Chaque carré parfait est divisible par 3 ou 4 ou quand on lui soustrait 1. Chaque
carré parfait est divisible par 5 ou l’est quand on lui additionne ou soustrait 1,
puisque le carré d’un nombre se termine nécessairement par l’un des chiffres :
1 , 4 , 5 , 6 , 9 , 0.
<script>
var i=1, t=0 ; tmp=s=""
for(; i<15 ; i++) {
document.write(
"<br><br>"+i+" :<br>")
p= Math.pow(i,2)
c(3) ; c(4) ; c(5)
}
9 :
* 81
81-1
81+1
* 81
81-1
81+1
* 81
81-1
81+1
DIVISIBLE par 3 =
(80) => non divisible
non divisible par 4
(80) => DIVISIBLE par
non divisible par 5
(80) => DIVISIBLE par
par 3
par 3
4 = 20
par 4
5 = 16
par 5
function c(d){
if(!(p%d)) document.write(
"* "+p+" DIVISIBLE par "+d+" = "+"<br>")
else if(p%d) document.write(
"* "+p+" non divisible par "+d+"<br>")
if((p-1)%d) document.write(
p+"-1 ("+(p-1)+") => non divisible par "+d+"<br>")
else document.write(
p+"-1 ("+(p-1)+") => DIVISIBLE par "+d+" = "+(p-1)/d+"<br>")
if((p+1)%d) document.write(
p+"+1 ("+(p+1)+") => non divisible par "+d+"<br>")
else document.write(
p+"+1 ("+(p+1)+") => DIVISIBLE par "+d+" = "+(p+1)/d+"<br>")
}
</script>
Retrancher 1 d’un carré parfait impair donne un multiple de 8.
<script>
var i=1, t=0 ; tmp=s="" ; flag=0
for(; i<1000000 ; i++) {
p= Math.pow(i,2)
if(p%2) if((p-1)%8) {
document.write(i + "* " + p + " INDIVISIBLE "+
"par " + 8 + " = " + (p-1)/8 + "<br>")
flag++
}
}
if(!flag) document.write(
jeudi 4 avril 2019
-6/49-
22:46:09
"Aucune exception trouvée jusqu'à "+i)
</script>
Exécution :
Aucune exception trouvée jusqu'à 1000000
On peut écrire des identités avec des carrés lorsque le premier terme du
membre de gauche est 3, 10, 21, 36, ... (voir les 39 premiers membres de
l’identité dans l’Array du code de programme ci-dessous). On a ainsi des identités de successivement 2, 3, 4, ... termes dans le premier membre (de gauche) et
1, 2, 3, ... termes dans le deuxième membre (de droite), dont les quatre premières identités :
 32 + 42 = 52 = 25
 102 + 112 + 122 = 132 + 142 = 365
 212 + 222 + 232 + 242 = 252 + 262 + 272 = 2030
 362 + 372 + 382 + 392 + 402 = 412 + 422 + 432 + 442 = 7230
<script>
p=new Array (
3,10,21,36,55,78,105,136,171,210,253,300,
351,406,465,528,595,666,741,820,903,990,
1081,1176,1275,1378,1485,1596,1711,1830,
1953,2080,2211,2346,2485,2628,2775,2926,3081)
pl=p.length
for(k=0;k<pl;k++){
g=d=0; t="{ [ "; s=""
qtt=k+2; n=p[k]
for(m=0;m<qtt;m++) {
t+="<b>"+n+"</b>^2 ("
g+=v=Math.pow(n++,2)
t+=v+") "
if(m<qtt-1) t+="+ "
}
t+=" ] <b>(="+g+")</b> } ==<br> { [ ";
g=d=0
for(m=0;m<qtt-1;m++) {
t+="<b>"+n+"</b>^2 ("
g+=v=Math.pow(n++,2)
t+=v+") "
if(m<qtt-2) t+="+ "
}
t+=" ] <b>(="+g+")</b> }"
document.write("*"+t+" <b><=></b> <b>"+g+"</b><br>")
}
</script>
jeudi 4 avril 2019
-7/49-
22:46:09
Exécution :
*{ [ 3^2 (9) + 4^2 (16) ] (=25) } ==
{ [ 5^2 (25) ] (=25) } <=> 25
*{ [ 10^2 (100) + 11^2 (121) + 12^2 (144) ] (=365) } ==
{ [ 13^2 (169) + 14^2 (196) ] (=365) } <=> 365
*{ [ 21^2 (441) + 22^2 (484) + 23^2 (529) + 24^2 (576) ] (=2030) } ==
{ [ 25^2 (625) + 26^2 (676) + 27^2 (729) ] (=2030) } <=> 2030
*{[36^2(1296)+37^2(1369)+38^2(1444)+39^2(1521)+40^2(1600)](=7230)} ==
{[41^2(1681)+42^2(1764)+43^2(1849)+44^2(1936)](=7230)} <=> 7230
*{[55^2(3025)+56^2(3136)+57^2(3249)+58^2(3364)+59^2(3481)+60^2(3600)](=19855)} ==
{[61^2(3721)+62^2(3844)+63^2(3969)+64^2(4096)+65^2(4225)](=19855)} <=> 19855
Comme le C, JS est casse sensible : var1 != Var1 != vAr1.
Le nom de variable (ou de fonction ou de paramètre) peut avoir n’importe
quelle longueur mais doit respecter les 3 règles suivantes :
 Commencer par une lettre (MAJUSCULE ou minuscule), ou un trait de
soulignement (_), ou un signe du dollar.
 Les lettres suivantes peuvent être comme ci-dessus (lettres, underscore ou
dollar) et en plus, des chiffres.
 Ne pas être un mot réservé.
JS diffère du C++ en ce que dans le JS *il n’est pas obligatoire de terminer une
instruction par un « ; » quand l’instruction est en fin de ligne (mais il le faut
quand deux instructions distinctes sont sur une même ligne physique), *la définition de variables n’exige pas le mot clé var et on ne spécifie pas explicitement
leur type (format d’encodage) : JS est un « loosely typed language with automatic coercion [= conversion implicite] », les variables n’ont pas de type fixe ;
elles prennent le type implicite de la valeur qui y est stockée, facilitant les affectations :
<SCRIPT>
window.onload=ftTables;
function ftTables(){
var tTables1 = document.body.createTextRange();
var tTables2 = tTables1.duplicate();
alert(tTables1.text +"\n==\n"+ tTables2.text)
}
</SCRIPT>
<BODY>
<DIV ID=d>Contenu de DIV. </DIV>
<P ID=p>Contenu de P. </P>
<A Href="" ID=a>Contenu de A. </A>
</BODY>
jeudi 4 avril 2019
-8/49-
22:46:09
Dans une expression arithmétique à plusieurs types de données, les nombres
sont convertis dans le type à plus forte précision, puis les nombres sont éventuellement convertis en string.
JS a six types de données : number, string, object, et Boolean, les deux autres (à
ne pas confondre avec NaN ou « not a Number ») étant null (non instanciée ou
déclarée – pas identique au null de C++) et undefined (instanciée =déclarée ou
définie= mais n’a jamais reçu une valeur explicite) ;
Le type de données Number : integer (entier) et floating-point numbers).
 Integers : positifs, 0, ou négatifs représentables en base de numération
 décimale (10),
 octale (8) introduit par un 0 suivi par des digits de 0 à 7 (s’il contient 8
et/ou 9 il est automatiquement traité/considéré comme décimal, et s’il
contient un « e » il génère une erreur, et s’il contient une virgule (plutôt
point) il est considéré comme « decimal floating point » donc non octal),
 ou hexadécimale (16) introduit par "0x" ou "0X" suivi par des digits 0 à 9
et/ou des lettres de A à F (ou a à f) 0xF == 15d et 0x10 == 16d. Tout ce qui
vient après une virgule (plutôt point) est rejeté / ignoré. Un « e » ne génère pas une erreur mais ne signifie pas exponentiel (e.g. document.write(0x10e9) => 4329 et document.write(0x10e10) => 69136).
 Floating-point number (réel) peut être positif ou négatif et contenir une virgule (decimal point), ou un "e" ou “E” (notation scientifique donnant la puissance de 10) suivi d’un entier positif ou négatif, soit les deux, selon le standard IEEE 754 de représentation numérique. Les nombres hexadécimaux et
octaux peuvent être négatifs mais jamais fractionnaires. Des valeurs numériques spéciales :
 NaN, ou not a Number (Pas un nombre)
 Positive Infinity (infini positif)
 Negative Infinity (infini négatif)
 Positive 0 (0 positif)
 Negative 0 (0 négatif)
Attention avec les expressions booléennes : si la constante prédéfinie false
(ou !true) ==0 (MININT), true (ou !false) a une valeur indéterminée souvent «
jeudi 4 avril 2019
-9/49-
22:46:09
1 » par défaut ou « -1 » (MAXINT) dans certains langages, en général toute valeur (+) ou (-) différente de zéro ou de false, est considérée comme true.
D’autres différences entre JS et C :
*La fonction main(), les arrays (tableaux) multi-dimensionnelles ne sont pas
gérées comme dans le C et en particulier toutes les lignes d’une array ne doivent pas nécessairement avoir le même nombre d’éléments dans toutes les colonnes et même toutes les lignes ne doivent pas nécessairement être de la même
dimension (les arrays y sont comme des paquets d’informations), *Les variables
système argc et argv … ; de plus et surtout *Les pointeurs (y compris les paramètres par référence) ne sont pas gérés. Pourtant certaines tâches sont mieux
effectuées par des pointeurs ou des structs, par exemple la fonction swap().
Comment contourner la difficulté :
<script>
tamax=8, tamin=14
t=new Array(tamax, tamin)
disp(t)
t=fswap(t)
disp(t)
function fswap(s){
tmp=s[0],s[0]=s[1],s[1]=tmp
return s
}
function disp(d){
alert("TA = " + d[0] + " / " + d[1])
}
</script>
On peut aussi utiliser des propriétés créées à la volée :
<script>
var TA = new Object();
TA.MAX=8
TA.min=14
TA.pls=68
alert(TA.MAX+" / "+TA.min)
TA=fswap(TA)
alert(TA.MAX+" / "+TA.min)
jeudi 4 avril 2019
-10/49-
22:46:09
function fswap(p){
if(p.min>p.MAX) {
tmp=p.MAX ; p.MAX=p.min ; p.min=tmp
}
return p
}
</script>
Encore d’autres différences : *les fonctions ne surchargent pas, *les structs
simples ne sont pas utilisées et seules existent les classes (structs avec propriétés
ou caractéristiques, méthodes ou fonctions intégrées / incorporées, constructeurs et destructeurs, héritage …), de plus *la gestion des chaînes de caractères
n’est pas la même, *beaucoup d’autres routines (fonctions de la bibliothèque)
ont été remplacées par d’autres et elles sont souvent adaptées à la gestion des
[éléments (balises) et attributs/styles de] pages Web.
Il n’ya pas que la différence entre les C et le JavaScript, il y a aussi des différences entre différents interpréteurs JS. Voici par exemple comment différents
Browsers exécutent un même code, ci-dessous :
<script>
document.write((new Date()).toLocaleString())
</script>
















25/07/2009 13:30:18
(Opera)
mardi 22 septembre 2009 04:24:13
(FireFox)
Tuesday, September 22, 2009 05:07:55 (Netscape 8.1.3)
Monday, September 21, 2009 13:45:44 (Mozilla)
samedi 25 juillet 2009 13:28:49
(Seo)
(CE Safe Browser)
Sat Jul 25 2009 13:45:15 GMT+0100 (Afr. centrale Ouest)
(Google Chrome 3.0.195.1 – 2009)
Saturday, July 25, 2009 13:34:19
(Safari 3.525.26.13)
(visionneur interne de EditPlus)
lundi 21 septembre 2009 12:00:50
(Advanced Browser)
(AvantBrowsser)
(AM Browser)
(Smart Explorer)
(AccessBrowser)
(Internet Explorer)
(AcooBrowser)
jeudi 4 avril 2019
-11/49-
22:46:09






(Austin Powers)
(NeoPlanet)
(CrazyBrowser)
(m9P)
(WindowSurfer)
(Maxthon)
Vérifiez donc d’abord votre code avec d’autres browsers (ou interpréteurs JS)
avant de conclure qu’il est la source d’un problème.
La propriété prototype :
Elle définit une/des nouvelle(s) propriété(s) pour un objet, la nouvelle propriété
est partagée par tous les objets du type spécifié (ou mieux ses descendants) et
créés avec l'opérateur new.
Syntaxe : typeObjet.prototype.newProperty = valeur
 typeObjet est le nom d'un constructeur spécifié par le type de l'objet.
 newProperty est le nom de la propriété à créer.
 valeur est la valeur initiale facultative de la propriété, pour tous les objets
du typeObjet spécifié.
Exemple :
<SCRIPT LANGUAGE="JavaScript">
vdate = new Date(
2008, 12, 11, 15, 20, 25)
// Ajout d'une propriété à l'objet Date :
Date.prototype.Millenaire;
vdate.millenaire =
Math.ceil(vdate.getFullYear()/1000)+"è<br>"
document.writeln("Jour Semaine = " +
vdate.getDay() +
"è<br>Millénaire : " +
vdate.millenaire);
Jour Semaine = 0è
Millénaire : 3è
Siècle = 21è
// Ajout d'une propriété à
// l'objet Date :
Date.prototype.Siecle =
Math.ceil(vdate.getFullYear()/100)+"è"
vdate2 = new Date()
jeudi 4 avril 2019
-12/49-
22:46:09
document.writeln("Siècle = " +
vdate2.Siecle);
</SCRIPT>
Exemple2 : Dans cet exemple figure la commande « alert » qui affiche une boîte
de message. JS offre trois sortes de “Message Boxes” pop-up (surgissant) :
« alert », « prompt » et « confirm » ; ce sont des méthodes de l’objet interface
« window ». Ces boîtes de message sont « modal » càd qu’ils monopolisent le
contrôle du processeur pour la fenêtre qui les a affichées, et on doit les fermer
avant de continuer.
alert prend au maximum un seul argument (la chaîne non HTML à afficher),
affiche un bouton OK pour fermer la boîte.
<script>
document.write( prompt("Dites un mot","") )
</script>
quoi ?
confirm prend un seul argument (la chaîne non HTML représentant la question
à poser) ; elle pose une question quantique / binaire / booléenne (OUI / NON) et
retourne true ou false selon que l’on clique < OK > ou < CANCEL >.
<script>
var rep = window.confirm(
"Voulez-vous rire ? OK = OUI , Cancel = NON");
if(rep) { alert(rep+" - gbrougble, gbrougble, gbrougble,...!"); }
else window.alert(rep + " - Oh, pourquoi NON!");
</script>
->
->
jeudi 4 avril 2019
-13/49-
22:46:09
prompt accepte au maximum deux arguments (la question, et la réponse par défaut dont le type par défaut est “undefined”).
<script>
rep=prompt("Tourner combien de fois ?", 15)
document.write(rep)
</script>
15
<script>
Date.prototype.HrCplt=
function(){
j = new Array(
"Dim","Lun","Mar","Mer","Jeu","Ven","Sam")
m = new Array("Jan","Fév","Mar","Avr","Mai",
"Jun","Jul","Aug","Sep","Oct","Nov","Déc")
d = new Date() ;
r = "Il est exactement :\n"
return r +
j[d.getDay()] + " , " + d.getDate()
+ "/" +
m[d.getMonth()]+ "/" + d.getFullYear()+ "\n" +
d.getHours()
+ " hrs : " +
d.getMinutes() + " Min : " +
d.getSeconds() + " Secs"
}
h = new Date()
alert(h.HrCplt())
</script>
Pour définir (créer) une nouvelle propriété ou méthode pour un objet plus facilement : juste l’utiliser et éventuellement lui affecter une valeur
<script>
var eleve = new Object()
this.nom = "Luys";
this.methode=fmethode // Sans arguments
with (eleve) {
cote = 45;
// eleve.cote = 45
delib = true;
// eleve.delib = true
}
with (eleve) document.write(
nom+" "+cote+" "+delib+"<br>")
document.write(
this.nom+" "+this.cote+" "+this.delib)
jeudi 4 avril 2019
-14/49-
Exécution :
Luys 45 true
Luys 45 true
*Dans la méthode*
Luys 45 true
Luys 45 true
22:46:09
this.methode(eleve)
function fmethode(p){
document.write("<br>*Dans la méthode*<br>")
with (p) document.write(
nom+" "+cote+" "+delib+"<br>")
document.write(
this.nom+" "+this.cote+" "+this.delib)
}
</script>
Rem.: this représente
l’objet [en cours de création].
Définir (créer) une nvlle template (structure, modèle) d’un objet est aussi facile:
Juste le définir comme une fonction (en fait constructeur de l’objet)
<script>
function eleve(a1,a2,a3){ // nouvel Objet eleve
this.nom=a1;
this.age=a2;
this.loge=a3;
this.meth1=fmethobj
this.meth2=fmethparms
}
function fmethobj(o){
// définition de eleve.meth1 (public)
if(o.nom!="") document.write("<br>*"+o.nom+" ")
if(o.age!="") document.write(o.age+" ")
if(o.loge!="") document.write(o.loge+" ")
if(o.newProp1!=undefined) document.write(o.newProp1+" ")
if(o.newProp2!=undefined) document.write(o.newProp2)
}
function fmethparms(p1,p2,p3,p4,p5){
// définition de eleve.meth2 (public)
if(p3.length!=0) document.write("<br>*"+p3+" ")
if(arguments[4]!=undefined) document.write(p5+" ")
if(p1!=null) document.write(p1+" ")
if(arguments[1]!="") document.write(p2+" ")
if(arguments.length>3) document.write(p4+" ")
}
Exécution :
*dias 120 true
*false NP2 luy 80
NP1
&NP1= NP1
NP2= NP2
#NP1= NP1
NP2= undefined
*dias 120 true
*luy 80 NP1
*luy 80 NP1
*dias 120 true
o1=new eleve("dias",120,true);
o1.meth1(o1) // appel fmethobj()
o2=new eleve()
o2.newProp1="NP1" // newProperty portée fichier
with(o2){
nom="luy"; age=80; loge=false
newProp2="NP2" // newProperty portée bloc
meth2(nom,age,loge,newProp1,newProp2) // appel fmethparms()
document.write("<br>&NP1= "+newProp1)
document.write("<br>NP2= "+newProp2)
jeudi 4 avril 2019
-15/49-
22:46:09
}
document.write("<br>#NP1= "+o2.newProp1)
document.write("<br>NP2= "+o2.newProp2)
o1.meth1(o1);o1.meth1(o2);o2.meth1(o2);o2.meth1(o1);
</script>
Le constructeur MakeArray() crée et initialise une array :
<script>
function MakeArray(length) {
this.extent = length;
for (iNum=0; iNum < length; iNum++) { this[iNum] = iNum; }
// crée et initialise une array
}
-1. «undefined»
0. «0»
1. «1»
2. «2»
3. «3»
4. «4»
5. «undefined»
6. «6»
myArray = new MakeArray(5);
myArray[6]=6
for(k=-1;k<7;k++)
document.write(k+". «"+myArray[k]+"»<br>")
</script>
Pour connaître si un objet est un prototype d’un autre :
<script>
var re = new RegExp();
document.write ( RegExp.prototype.isPrototypeOf( re ) );
</script>
true
Pour connaître si un objet possède une propriété :
<script>
var s = new String("un texte");
document.write('s.hasOwnProperty("split") = '+
s.hasOwnProperty("split")+"<br>");
document.write('String.prototype.hasOwnProperty("split") = '+
String.prototype.hasOwnProperty("split")+"<br>");
document.write('s.hasOwnProperty("length") = '+
s.hasOwnProperty("length")+"<br>");
document.write('String.prototype.hasOwnProperty("length") = '+
String.prototype.hasOwnProperty("length"));
</script>
Exécution :
jeudi 4 avril 2019
-16/49-
22:46:09
s.hasOwnProperty("split") = false
String.prototype.hasOwnProperty("split") = true
s.hasOwnProperty("length") = true
String.prototype.hasOwnProperty("length") = true
Gestion de l’élément (balise HTML) « image » dans JS
<body>

<img src="http://dummy1">
<script>
// création de l'objet image dans JS
var Objimage;
Objimage = new Image()
// initialisation
Objimage.src = "http://dummy0"
// recup des infos
wi = Objimage.width
he = Objimage.height
document.write("<img src="+Objimage.src+"><br>")
tmp=""
il=document.images.length
tmp+=il+" images chargées:"+"\n"
for(k in document.images)
tmp+=k+". "+
"src= "+document.images[k].src+
" * bgcolor="+document.images[k].bgcolor+
" * height="+document.images[k].height+
" * width="+document.images[k].width+"\n"
document.write(tmp)
</script>
</body>
Exécution :
4 images chargées: length. src= undefined * bgcolor=undefined *
height=undefined * width=undefined 0. src= http://dummy1/ * bgcolor=undefined * height=30 * width=28 1. src= http://dummy2/ * bgcolor=undefined * height=30 * width=28 2. src= http://dummy3/ * bgcolor=undefined * height=30 * width=28 3. src= http://dummy0/ * bgcolor=undefined * height=30 * width=28
jeudi 4 avril 2019
-17/49-
22:46:09
Le nom de l’élément cliqué :
<head>
<script type="text/javascript">
function clickedEl(e,nEl){
var targ, b
if (!e) var e=window.event;
if (e.target) targv=e.target;
else if (e.srcElement) targv=e.srcElement;
if (targv.nodeType==3) /* pour Safari */
{ targv = targv.parentNode; }
console.log("« "+targv.tagName+" »");
if(nEl) console.log(" :: MultiLine");
else console.log(" :: Not MultiLine");
eb=e.button;
if(eb==0) b="Left";
else if(eb==1) b="Middle"
else if(eb==2) b="Right";
console.log("Bouton =",b," ",e.x," "+e.y)
}
</script>
</head>
<body onmouseup="clickedEl(event,this.isMultiLine)">
<p onmouseup="clickedEl(event,this.isMultiLine)">
Clickez n'importe où, tout bouton</p>
<h3 onmouseup="clickedEl(event,this.isMultiLine)">
Ceci un Header</h3>
<INPUT VALUE="Ceci un input"
onmouseup="clickedEl(event,this.isMultiLine)"><br>
<a href="javascript:void(0)"
onmouseup="clickedEl(event,this.isMultiLine)">
Ceci est un lien hypertexte (HYPERLIEN)</a><br>
<a name="ici" onmouseup=
"clickedEl(event,this.isMultiLine)">
cible</a><br>
<HTMLAREA onmouseup="clickedEl(event,this.isMultiLine)">
HTMLAREA</HTMLAREA><br>
<TEXTAREA onmouseup="clickedEl(event,this.isMultiLine)">
TEXTAREA</TEXTAREA><br>
<FIELDSET onmouseup="clickedEl(event,this.isMultiLine)">
FIELDSET</FIELDSET><br>
<img onmouseup="clickedEl(event,this.isMultiLine)" />
</body>
jeudi 4 avril 2019
-18/49-
22:46:09
Exécution :
«
«
«
«
«
«
«
«
«
«
BODY » isMultiLine - Left 667 463
P » isMultiLine - Right 63 30
H3 » isMultiLine - Middle 58 70
INPUT » is Not MultiLine - Left 69 107
A » isMultiLine - Right 31 126
A » isMultiLine - Middle 33 149
BODY » isMultiLine - Left 53 168
TEXTAREA » isMultiLine - Right 60 195
FIELDSET » isMultiLine - Middle 60 226
IMG » isMultiLine - Left 29 277
En passant, les propriétés de event sont :
data , height , layerX , layerY , modifiers ,
pageX , pageY , screenX , screenY , target ,
type , which , width , x , y
Définition de nouvelles arrays comme « properties » de la première array :
<script> "use strict";
var j=["Dimanche","Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi"]
var a_nJsem=new Array(); //
let aLaDate=new Array();
// 1ère Nvlle property Array pour l'Objet « Array » a_nJsem
let oNvDate=new Object();
// 2ème Nvlle property Object pour l'Objet « Array » a_nJsem
aLaDate[0]=new Date(2000,8,11,12,23,34)
a_nJsem[0]=aLaDate[0].getDay()
aLaDate[1]=new Date(2004,8,11)
jeudi 4 avril 2019
-19/49-
22:46:09
aLaDate[2]=new Date(2008,8,11,54,65,76)
aLaDate[4]=new Date(100,8,11,18,29,30)
aLaDate[6]=new Date(2012,8,11,12,38,45)
for(let k=0 ; k<a_nJsem.length ; k++)
console.log("a_nJsem[" + k + "]*=> "+a_nJsem[k] + " // " +
"aLaDate[" + k + "] = "+aLaDate[k])
console.log("*".repeat(25));
for(let k in a_nJsem)
console.log("a_nJsem[" + k + "]*=> "+a_nJsem[k] + " // " +
"aLaDate[" + k + "] = "+j[a_nJsem[k]])
let mins=[];
console.log(oNvDate);
oNvDate[0]=new Date(2000,8,11)
mins[0]=oNvDate[0].getMinutes()
oNvDate[1]=new Date(2004,8,11,45,56,67)
oNvDate[2]=new Date(2008,8,11,78,89,90)
oNvDate[5]=new Date(9999,8,11)
console.log(oNvDate);
for(let k=0 ; k<mins.length ; k++)
console.log("mins[" + k + "]*=> "+mins[k] + " // " +
"oNvDate[" + k + "] = "+oNvDate[k])
</script>
Exécution :
jeudi 4 avril 2019
-20/49-
22:46:09
Remarques :
 Notez le réajustement automatique des éléments de l'heure
 Notez aussi que les indices max définis pour « varA.otherNewPrp[] » est
2, « varA.otherNewPrp[3] » et au-delà sont indéfinis (« undefined »).
 Notez aussi comment « varA[] » conserve toutes les définitions / affectations qui lui ont été appliquées.
 Notez aussi que les nouvelles properties ne perturbent pas les valeurs affectées aux « value= » des indices de l'Array « varA ».
En effet, des tables internes traquent tous les objets créés.
Exemple1 :
<body>
<form id="Form1"></form><form name="Form2"></form><form id="Form3"></form>
document.write(document.forms.length + " FORMS rencontrés jusqu'ici")
for(k=0;k<document.forms.length;k++)
document.write("<br>#"+document.forms[k].id);
for(k=0;k<document.forms.length;k++)
jeudi 4 avril 2019
-21/49-
22:46:09
document.write("<br>*"+document.forms[k].name);
</script>
<form name="Form4"></form> <form id="Form5"></form>
</body>
Exécution:
3 FORMS rencontrés jusqu'ici
#Form1
#
#Form3
*
*Form2
*
Exemple2:
<SCRIPT>
var tTables1 =
document.body.createTextRange();
alert(tTables1.text)
}
</SCRIPT>
<BODY>
<DIV ID=d>Contenu de DIV.</DIV>
<P ID=p>Contenu de P.</P>
<A Href="" ID=a>Contenu de A.</A>
</BODY>
Les tables internes [permettent de] gére(r) les éléments HTML :
function go(){
var x=document.getElementById('elTable').rows[0].cells;
var y=document.getElementById('elTable').rows[2].cells;
var z=document.getElementById('elTable').rows[1].cells;
x[0].innerHTML="AFFECT R0C0";
y[1].innerHTML="AFFECT R2C1";
z[2].innerHTML="AFFECT R1C2";
}
</script>
<body>
<table id="elTable" border="1">
<tr><td>Rang-0 Col-0</td><td>Rang-0 Col-1</td>
<td>Rang-0 Col-2</td></tr>
jeudi 4 avril 2019
-22/49-
22:46:09
</table>
<input type="button" onclick="go()" value="Demo">
</body>
Exécution et après avoir cliqué sur Démo :
Équivalents des variables système argc et argv du C dans JS :
<script>
// Définition de fonction
function argc_argv() {
nbargs=arguments.length
document.write(
"<ul>---Nombre de paramètres ="+
nbargs)
for(k=0;k<nbargs;k++)
document.write("<li>"+
arguments[k]+"</li>")
document.write("</ul>")
}
Exécution :
---Nombre de paramètres = 0

un


un
deux
// Appels de fonction
argc_argv()
argc_argv("un")
argc_argv("un","deux")
</script>
Affectation d’Arrays :
<script>
ar = new Array(3)
ar=[5,"Z",7,"e",2,"B",15,"a",1,"M",5,"w",8]
// Evitez d'utiliser des éls au-delà du dernier indice défini
document.write("ar= "+ar.length + " - " + ar + " - " + ar.constructor)
sar=new Array
document.write("<br>")
document.write("sar= "+sar.length + " - " + sar + " - " + sar.constructor)
document.write("<br>")
sar=ar
document.write("sar= "+sar.length + " - " + sar + " - " + sar.constructor)
jeudi 4 avril 2019
-23/49-
22:46:09
</script>
ar= 13 - 5,Z,7,e,2,B,15,a,1,M,5,w,8 - function Array() { [native code] }
sar= 0 - - function Array() { [native code] }
sar= 13 - 5,Z,7,e,2,B,15,a,1,M,5,w,8 - function Array() { [native code] }
Une façon de gérer les Arrays multidimensionnelles dans JS :
<script>
a=new Array(3)
a[0]=new Array(2);
a[1]=new Array(3);
a[0][0]="Notre array 00";
a[1][0]="Notre array 10";
a[1][1]="Notre array 11"
for(k=0;k<2;k++)
</script>
a[2]=new Array(1)
for(m=0;m<3;m++)
document.write(a[k][m] + " | ")
Exécution :
Notre array 00 | Notre array 01 | undefined |
Notre array 10 | Notre array 11 | Notre array 12 |
Le petit polyfill ci-après teste si un élément fait partie d’une array :
-2 in 1,2,3 ? false
-1 in 1,2,3 ? false
0 in 1,2,3 ? true
1 in 1,2,3 ? true
2 in 1,2,3 ? true
3 in 1,2,3 ? false
4 in 1,2,3 ? false
<script>
tmp=""
a = new Array(1,2,3)
for(k=-2 ; k<5 ; k++)
tmp+=k+" in "+a+" ? " + (k in a)+"\n"
document.write(tmp)
</script>
Pour les tables internes on utilise la méthode inRange() :
<SCRIPT>
true
var tTables1 = document.body.createTextRange();
var tTables2 = tTables1.duplicate();
var isInside = tTables1.inRange(tTables2);
jeudi 4 avril 2019
-24/49-
22:46:09
document.write(isInside)
}
</SCRIPT>
<BODY>
<DIV ID=d>Contenu de DIV. </DIV>
<P ID=p>Contenu de P. </P>
<A Href="" ID=a>Contenu de A. </A>
</BODY>
On peut créer un mini glossaire / dictionnaire
<script>
function ForInDemo(){
var base, key, dict = "";
base = {
"p" : "Parton" , "a" : "Armand" ,
"d" : "Dolly"
}
for (key in base) {
dict += key + " = "+ base[key] + "\n";
}
return(dict);
}
alert(ForInDemo())
</script>
On peut créer / gérer une mini base de données
<script>
function ForInDemo(){
var base, key, dict = "";
base = {
"p" : "Parton" , "a" : "Armand" ,
"d" : "Dolly"
}
karr=["a","b","d","k","p","q"]
for (key in karr) {
dict += karr[key] + " = " + base[karr[key]] +
"\n";
}
return(dict);
}
alert(ForInDemo())
</script>
jeudi 4 avril 2019
-25/49-
22:46:09
Un aspect méconnu de JS c’est la gestion dynamique du filtre :
<style>img { filter:invert() }</style>
function getFilter(){
document.getElementById('myImage').style.filter="invert()";
}
function noFilter(){
document.getElementById('myImage').style.filter=false;
}
</script>
</head>
<body>
<p>Exemple d'insertion DYNAMIQUE du filtre "invert".</p>
<b>Survolez l'image</b><br />
<img id="myImage" src="joyeux-noel.jpg" width="160" height="120"
onmouseover="noFilter()" onmouseout="getFilter()">
<body>
Différentes valeurs de filter sont :
blur, fliph, flipv, gray, shadow, xray, mask.color, dropshadow, alpha.opacity,
light.enabled, wave(add, freq, lightstrength, phase, strength), glow,
glow(color=#Hex,strength=n)
jeudi 4 avril 2019
-26/49-
22:46:09
Une autre différence entre JavaScript et C++ :
Dans le C++ tout caractère est représenté par son code ASCII et on peut soit afficher directement ce code ASCII ou le caractère (graphisme) correspondant,
simplement en spécifiant le format d’affichage %d ou %u ou %i ou %c par
exemple.
Dans JavaScript :
 pour obtenir le code ASCII d’un caractère chaîne[index] on utilise la méthode chaîne.charCodeAt(index), tandis que
 pour obtenir le caractère correspondant à un code ASCII (plutôt UNICODE) on utilise la méthode String.fromCharCode( Unicode1, Unicode2, …, UnicodeN) (le mot clé String – littéral, comme tel- spécifie la
classe String possédant la méthode fromCharCode()), tandis que
 la méthode charAt(index) dans l’instruction texte.charAt() retourne le
caractère à la position index dans la chaîne texte, et permet
d’attribuer/placer un autre caractère à cette position.
 La gestion de chaînes de caractères n’accepte pas d’indexation du genre
texte[indice].
<script>
var t1=t2="DIASOLUYE"
tp5=t1.charAt(5)
// t2.charAt(5)="B"
// Non autorisé,
// affectation d’une valeur à un résultat de fonction
t2[5]="B"
// Passe mais sans effet
// t2.substring(6)="M"
// Non autorisé,
//t2.substr(4,1)="Q"
// Non autorisé,
// t2.substring(3,4)="X"
// Non autorisé,
t3=t1.replace("YE", "KA")
alert( t1+" * "+tp5+" * "+t1[5]+" * "+t2[5]+" * "+t2+" * "+t3 )
</script>
jeudi 4 avril 2019
-27/49-
22:46:09
affichera :
Pour remplacer un élément à une position donnée :
<script>
s="diasoluka"
alert(s+" "+replChar(s,5,"W"))
Exécution :
function replChar(s1,pos,ch){
s2=s1.substr(0,pos-1)
s2+=ch
s2+=s1.substring(pos)
return s2
}
</script>
.
L’opérateur d’addition/concaténation (+) égare parfois :
<script language=JavaScript>
alert(
"date = " + 1000 + 900 + 45+ "\n" +
"date = " + (1000 + 900 + 45))
</script>
Affichera ->
Les parenthèses (3è ligne) résolvent parfois le problème.
On peut aussi utiliser la méthode ci-dessous :
mil=1000, neufcent=900, quatcinq=45, cinq=5
alert( "l'an "+
mil + neufcent + quatcinq + cinq + "\n" +
"l'an "+
eval(mil + neufcent + quatcinq + cinq))
</script>
affichera ->
Notez la fonction eval() dans la 2è ligne d’instruction.
jeudi 4 avril 2019
-28/49-
22:46:09
Si les nombres sont des values de champs (les valeurs de champs sont littérales
même s’ils sont numériques), on peut parfois être obligé d’écrire
=fâcheusement=
« "l'an "+ eval (eval(mil) + eval(neufcent) + eval(quatcinq) + eval(cinq)))
<input name='jour' value='15'><label for='j'>Jour</label>
<input name='mois' value='9'><label for='m'>Mois</label>
<input name='annee' value='2009'><label for='a'>Année</label>
<script>
J=jour.value;M=mois.value;A=annee.value;
T=J+M+A
alert(J+"+"+M+"+"+A+"="+T)
</script>
15+9+2009=1592009
<script>
T=eval(J+M+A)
document.write(J+"+"+M+"+"+A+"="+T)
</script>
15+9+2009=1592009
<script>
T = eval(eval(J)+eval(M)+eval(A))
</script>
15+9+2009=2033
Solution du problème, on peut travailler « en négatif » (Plus court et plus sûr) :
T = -(-J-M-A)
jeudi 4 avril 2019
-29/49-
22:46:09
<script>
T=-(-J-M-A)
</script>
15+9+2009=2033
Observez ce qui suit : Mélangés avec des Strings dans une concaténation, les
nombres ont un comportement qui peut être imprévisible, traités comme tels
ou forcés en Strings selon le contexte :
alert(1000 + 900 + 45 + " =
1000 + 900 + 45 + " =
parseInt(1000 + 900 +
"l'an " + eval(1000 +
</script>
année\n" +
année\n" +
45) + "=année\n" +
900 + 45))
Affichera
Pour les flottants on utilise « parseFloat() ».
alert(1000 + 900 + 45 + " = année\n" +
1000 + 900 + 45 + " = année\n" +
parseInt(1000 + 900 + 45) + "=année\n" +
"*".repeat(10) +
"l'an
"l'an
"l'an
"l'an
"
"
"
"
+
+
+
+
eval(1000 + 900 + 45)
-(-1000 - 900 - 45) +
1*(1000 + 900 + 45) +
(1000 + 900 + 45)/1 +
+ "\n" +
"\n" +
"\n" +
"\n" +
"*".repeat(10) +
`${1000 + 900 + 45} = année\n` +
`l'an ${1000 + 900 + 45} = année`) ;
</script>
Mais attendez, ce n’est pas tout.
<script>
document.write("Une difficulté sied ici : " + M+A-J + " Vous avez vu ?")
jeudi 4 avril 2019
-30/49-
22:46:09
</script>
NaN Vous avez vu ?
<input id='jour' value='15'><label for='j'>Jour</label>
<input id='mois' value='9'><label for='m'>Mois</label>
<input id='annee' value='2009'><label for='a'>Année</label>
let J=document.getElementById("jour").value,
M=document.getElementById("mois").value,
A=document.getElementById("annee").value;
console.log(
"Une difficulté sied ici : " +
eval(-(-M-A)-J) +
" Vous avez vu ?")
console.log(
"Une difficulté sied ici : " +
eval(eval(M)+eval(A)-J) +
" Vous avez vu ?")
</script>
Une difficulté sied ici : 2003 Vous avez vu ?
Une difficulté sied ici : 2003 Vous avez vu ?
Exercice :
Convertissez en JavaScript la partie en basic du code ci-dessus, IL DONNE infailliblement le jour de semaine de toute date.
<input
<input
<input
<input
name='jour' value='15'><label for='jour'>Jour</label>
name='mois' value='9'><label for='mois'>Mois</label>
name='annee' value='2009'><label for='annee'>Année</label><br>
type=button onclick="foo()" value="Donnez le jour de la semaine">
<script>
function foo(){
jsem=["Samedi","Dimanche","Lundi","Mardi","Jeudi","Vendredi","Samedi"]
j=jour.value;m=mois.value;a=annee.value; var wd
/* CONVERTISSEZ EN JS CE CODE EN BASIC
if(m<=2) then a=a-1
if(m<=2) then m=m+12
mc = INT((m+1)*(13/5))
nab = INT(5*A/4)
jeudi 4 avril 2019
-31/49-
22:46:09
nsc=
n4sc
base
wd =
INT(A/100)
= INT(A/400)
= j+mc+nab-nsc+n4sc
INT((base/7 - INT(base/7)) * 7 + 0.1)
FIN BASIC */
alert(jsem[wd])
}
</script>
Bien que donc pratiquement ce qui marche avec C++ marche avec JavaScript, il
faut quand même de la prudence/attention quand on programme en JS : pour
traiter une addition de nombres comme concaténation littérale et pas comme
somme arithmétique en début d’une concaténation littérale de nombres se présentant comme évaluation arithmétique, créez un terme factice de type chaîne
vide en début de l’expression :
" "+1000+900+45 = chaîne littérale « concaténation » de nombres 100090045.
1000+900+45 = Expression arithmétique donne une somme 1945.
Voici la confusion qui peut arriver 1 quand on ne prend pas garde à la manipulation des semblant de chiffres / nombres, ici dans une opération de comparaison. Les « value » des « input » sont littéral même quand ils sont numériques.
En passant, voici une autre confusion qui peut arriver, cette fois-ci dans toute programmation. Les conditions
jamais exécutées :
1
<script>
r=Math.round(Math.random()*1000)
if(r<500) {
document.write(r + " < " + 500 + "<br>")
if(r>=500) document.write("Jamais exécuté : " + r + " >= 500<br>")
if(r<700) document.write("N'ajoute rien à r<500 : " + r + " < 500<br>")
}
</script>
Exécution:
200 < 500
N'ajoute rien à r<500 : 200 < 500
C’est une erreur de logique : les erreurs de programmation sont souvent regroupées en erreur de syntaxe ou erreur du temps de compilation (empêchent
l’exécution), erreur de logique, erreur du temps d’exécution (se soldent souvent
jeudi 4 avril 2019
-32/49-
22:46:09
<input name=i1n value=10><input name=i2n value=2><br>
<script>
i1=i1n.value , i2=i2n.value
s=i1 + " > " + i2
t=i1 > i2
document.write(s + " ? " +t + " – littéral | chaîne<hr>")
i1v=eval(i1n.value) , i2v=eval(i2n.value)
s=i1v + " > " + i2v
t=i1v > i2v
document.write(s + " ? " +t + " - numérique<hr>")
</script>
Exécution :
10
2
10 > 2 ? false - littéral | chaîne
10 > 2 ? true - numérique
Les values des inputs sont littérales et ne sont pas convertibles en numériques :
<style>
input{width:165}
</style>
<input onclick="go(this)" value=25></input>
let tot=0, bcg="cyan"
function go(p){
if(p.style.background!=bcg)
tot=eval(eval(tot)+eval(p.value));
p.style.background=bcg;
p.value =
"typeof p.value ("+p.value+") = "+
typeof p.value
}
</script>
-> onclick ->
en plantage : boucle interminable | insortable, division par zéro, logarithme ou
racine carré d’un nombre négatif), erreur de conception cfr 2x2 = 2+2 = 2^2)…
jeudi 4 avril 2019
-33/49-
22:46:09
Voici comment contourner la difficulté (utiliser la valeur d’un champ input
comme numérique), mais dans un très grand exemple :
<style>
input{width:25;background:lightgrey}
</style>
Critères de détermination en faveur d'une spondylarthropathie (Signes ou histoire de la maladie / Points)<br><br>
<input type=text id=doulnoct onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=1>
<label for=doulnoct>1. Douleurs nocturnes lombaires ou dorsales
et/ou raideur matinale lombaire ou dorsale = 1</label><br><br>
<input type=text id=oligoarthrites onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=oligoarthrites>2. Oligoarthrites asymétriques = 2</label><br><br>
<input type=text id=doulfessp onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=1>
<label for=doulfessp>3. Douleurs fessières sans précision = 1</label><br><br>
<input type=text id=doulfesb onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=doulfesb>4. Douleurs fessières à bascule = 2</label><br><br>
<input type=text id=doigtsauc onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=doigtsauc>5. Doigt ou orteil en saucisse = 2</label><br><br>
<input type=text id=talalgies onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=talalgies>6. Talalgies ou toute autre enthèsopathie = 2</label><br><br>
<input type=text id=iritis onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=iritis>7- Iritis = 2</label><br><br>
<input type=text id=uretng onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=1>
<label for=uretng>8- Urethrites non gonococciques ou cervicite moins d'un mois
avant le début d'une arthrite = 1</label><br><br>
<input type=text id=diarm1m onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=1>
<label for=diarm1m>9Diarrhées moins d'un mois avant une arthrite = 1</label><br><br>
<input type=text id=atcdpsor onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=atcdpsor>10-Présence ou ATCD de psoriasis et/ou de balanite signes
radiologiques = 2</label><br><br>
jeudi 4 avril 2019
-34/49-
22:46:09
<input type=text id=sacroiliite onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=3>
<label for=sacroiliite>11Sacroiliite (stade >2 si bilatérale ou stade 3 si unilatérale Terrain génétique = 3</label><br><br>
<input type=text id=atcdf onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=atcdf>12-Présence de l'antigène B27 et/ou ATCD familiaux de pelvispondylite, de syndrome de Reiter, de psoriasis, d'uvéite, d'entérocolopathies chroniques = 2</label><br><br>
Sensibilité au traitement<br><br>
<input type=text id=amel48hains onclick="go(this)" onclick="go(this)" oncontextmenu="go(this,1)" value=2>
<label for=amel48hains>13-Amélioration en 48h des douleurs par AINS et/ou rechute rapide (48h) des douleurs à leur arrêt = 2</label><br><br>
<hr>Le malade est déclaré comme ayant une spondylarthropathie
Si la somme des points est égale ou supérieure à 6.<br><br>
<div style="background:#864DE5;color:yellow;padding:10">SPONDYLARTHRITE ?</div>
<div id=total style="border:thin solid;width:350;padding:10"></div>
alert("Clic pour Ajouter,\nclic-droit pour Annuler");
let t, tot=0, bcg="orange"
function go(p,q){
let inc;
if((q && p.style.background) || !p.style.background){
if(q){
if(p.style.background.startsWith(bcg)) inc =-p.value;
else inc=0;
}
else if(!p.style.background) {
inc = p.value;
}
tot = 1*tot + 1*inc;
// La solution sied ci-haut!
if(q) p.style.background="";
else p.style.background=bcg;
t=tot+" / 6 ("+(tot/6*100).toFixed(2)+" %)";
if(tot==6){
total.innerHTML=t+" = JUSTE POSITIF";
total.style.background="orange";
}
else if(tot>6) {
total.innerHTML = t+
' = <span="font-weight:600">PLUS QUE POSITIF</span>';
total.style.background="red";
}
else {
total.innerHTML=t+" = NÉGATIF";
jeudi 4 avril 2019
-35/49-
22:46:09
total.style.background="lime";
}
}
}
</script>
Exécution :
jeudi 4 avril 2019
-36/49-
22:46:09
jeudi 4 avril 2019
-37/49-
22:46:09
Dans JavaScript, la gestion des chaînes de caractères est même enrichie, e.g.
l’affichage automatique d’un nombre décimal dans une base quelconque :
let tmp="";
var n = Math.round(Math.random()*1000);
for(let k=2;k<=22;k++){
tmp+="| Base" +
k.toString().padStart(3," ") +
": " +
n +
"d= " +
n.toString(k).padStart(10," ");
if((!((k-1) %3)) && k!=0) tmp+="\n";
}
console.log(tmp);
</script>
Exécution:
Puisqu’on y est, voici quelques méthodes de l’objet String:
anchor , big , blink , bold , charAt , charCodeAt , concat (String)
, fixed , fontcolor , fontsize , fromCharCode , indexOf , italics ,
lastIndexOf , link , match , replace , search , slice (String) ,
jeudi 4 avril 2019
-38/49-
22:46:09
small , split , strike , sub , substr , substring , sup , toLowerCase , toSource , toString , toUpperCase , valueOf
JS est un langage POO et orienté Internet pour dynamiser (rendre interactives)
les pages Web, en manipulant (jouant sur) les éléments (balises) HTML.
Exemple de gestion Internet :
<script>
document.write(encodeURIComponent("http://www.pathurl.ext") + "<br>")
document.write(decodeURIComponent("http%3A%2F%2Fwww.pathurl.ext"))
</script>
Exécution :
http%3A%2F%2Fwww.pathurl.ext
http://www.pathurl.ext
Exemple de gestion de balise HTML :
<body>
<div id=d></div>
</body>
<input name=n>
<script>
document.getElementById("d").innerHTML= "1. getElementById dans div"
document.write("<br>2. Le texte dans div est : « " +
document.getElementById("d").innerText + " »")
n.value="3. Affectation dans input"
i='innerText'
document.write("<br>4. « "+ d[i] +" »")
if(confirm("Go")) d.innerHTML="5. Nouveau texte dans div"
</script>
</body>
Exécution :
jeudi 4 avril 2019
-39/49-
22:46:09
Exemple de gestion de style avec JavaScript & fonction dans une fonction :
<p id="idn">Test</p>
<script>
blink = function(e,t){
setInterval(
function(){
var s = e.style,
v='visibility',
d='visible',
h='hidden';
s[v] = (s[v]==h?d:h);
},
(t||500));
}
<p id="idn">Test</p>
<script>
function blink(e,t){
setInterval(
function(){
var s = e.style,
v='visibility',
d='visible',
h='hidden';
s[v] = (s[v]==h?d:h);
},
(t||500));
}
ou
blink(idn,300)
</script>
blink(idn,300)
</script>
<div id="iT">Texte Fugace</div>
<SCRIPT>
function f_chge(idEl,p){
el=document.getElementById(idEl).style
if(p==1) el.visibility = "hidden"
if(p==0) el.visibility = "visible"
}
</SCRIPT>
<input type=button onclick=f_chge("iT",0) value="Afficher">
<input type=button onclick=f_chge("iT",1) value="Cacher">
En passant, voici la méthode getElementsByName (notez le « s »)
<SCRIPT>
function f_getElementsByName(){
// Retourne une COLLECTION de 3 éléments INPUT.
var aInput=document. getElementsByName ("firstName
");
alert(aInput.length+" * "+aInput[2].checked)
}
</SCRIPT>
<INPUT
<INPUT
<INPUT
<INPUT
TYPE="radio" NAME="firstName">
TYPE="button" VALUE="Get Names"
onclick="f_getElementsByName()">
Un autre exemple :
jeudi 4 avril 2019
-40/49-
22:46:09
<head>
var counter=0;
var t;
function finit(){
document.getElementById('i').value="Continuer";
stopClock()
}
function stopClock(){
document.getElementById('txt').value=counter++;
t=setTimeout("stopClock()",1000);
}
function stopCount(){ clearTimeout(t); }
</script>
</head>
<body>
<form>
<input type="button" value="Démarrer" onClick="finit()" id='i'>
<br><input type="text" id="txt"><br>
<input type="button" value="Pause" onClick="stopCount()">
</form>
</body>
Si « window.open » commande la création d’une nouvelle fenêtre, les propriétés
ci-dessous permettent aussi bien de connaître l’URL de la page que de remplacer la page en cours par celle de l’opérande de droite de l’affectation, et remplace la nouvelle page dans la fenêtre en cours.
window.location.href
location.href
document.URL (2)
window.location
Location
Exemple de gestion directe d’URL avec JavaScript :
2
Signalons que la propriété « document.lastModified » donne la date de la dernière sauvegarde.
jeudi 4 avril 2019
-41/49-
22:46:09
<script>
alert("«"+
document.URL+"»");
</script>
<script>
b=" »" + "<br>"
tmp =" 1. document.URL = « "+ document.URL +b
// tmp =" 2. location.URL = « "+ location.URL +b
// tmp =" 3. window.URL = « "+ window.URL +b
tmp+=" 4. document.href = « "+ document.href +b
tmp+=" 5. location.href = « "+ location.href +b
tmp+=" 6. window.href = « "+ window.href +b
tmp+=" 7. document.location = « "+ document.location +b
tmp+=" 8. location.location = « "+ location.location +b
tmp+=" 9. window.location = « "+ window.location +b
tmp+="10. document.location.href = « "+ document.location.href +b
// tmp+="11. location.location.href=« "+ location.location.href +b
tmp+="12. window.location.href = « "+ window.location.href +b
tmp+="13. document = « "+ document +b
tmp+="14. location = « "+ location +b
tmp+="15. window = « "+ window +b
document.write(tmp);
</script>
Exécution :
1. document.URL = « file://D:\DADET\dummy.htm »
4. document.href = « undefined »
5. location.href = « file:///D:/DADET/dummy.htm »
6. window.href = « undefined »
7. document.location = « file:///D:/DADET/dummy.htm »
8. location.location = « undefined »
9. window.location = « file:///D:/DADET/dummy.htm »
10. document.location.href = « file:///D:/DADET/dummy.htm »
12. window.location.href = « file:///D:/DADET/dummy.htm »
13. document = « [object] »
14. location = « file:///D:/DADET/dummy.htm »
15. window = « [object] »
Ces propriétés utilisées comme membre de gauche remplacent la fenêtre en
cours par l’URL spécifié par le membre de droite :
window.location="diasmirehfbc.html".
Repris aussi bien comme opérande de gauche que de droite, elles permettent de
rafraîchir (recharger) la page : document.URL = location.
jeudi 4 avril 2019
-42/49-
22:46:09
D’autres moyens pour rafraîchir la page :
history.go(0)
location.reload()
Autre exemple (illustre aussi l’usage du sélecteur de style ID selectors) : sélectionner dans une liste d’options la page à ouvrir.
<style>
#menu { background:navy;color:lime;text-transform:capitalize }
</style>
<body>
<form name="f1n" id="f1i">
<select id="menu" onchange="ftest()">
<option>--faites un choix--</option>
<option value="http://www.Mercedes.com">Mercedes</option>
<option value="http://www.Ford.com">Ford</option>
<option value="http://www.Ferari.com">BMW</option>
</select>
</body>
<script>
function ftest() {
window.location=document.getElementById("menu").value;
}
</script>
Naviguer dans les pages parcourues (historique) : history.go( hParam )
hParam : paramètre requis, entier ou string. Un entier indique la position rela-
tive de l’URL dans la liste de l’historique, tandis qu’un string indique un URL
exact dans la liste de l’History.
Pour connaître si une page a été ouverte avec référence à un signet (signe numérique #), utilisez hash.
<script>
function f_Hash() {
nd=window.open("url#signet")
if(nd.document.location.hash!="")
alert(nd.document.location.hash)
}
onload=f_Hash
</script>
jeudi 4 avril 2019
-43/49-
22:46:09
Exemple2
<script>
nd=window.open("http://url.dom")
nd.location.hash="signet"
</script>
C’est l’équivalent de nd=window.open("http://url.dom#signet") à l’ouverture,
ou de cliquer sur <a href=location#signet>signet</a> dans une page ouverte.
Exemple3
<SCRIPT>
document.write("<a
for(k=0;k<300;k++)
for(k=0;k<300;k++)
document.write("<a
name='signet1'></a>")
document.write("signet1 ")
document.write("signet2 ")
name='signet2'></a>")
location.hash="signet2"
alert("Nb d’Or (1,6180339887498948482045868343656)= " + (1+Math.sqrt(5))/2)
location.hash="signet1"
</SCRIPT>
Exemple4
<script>
function f_Hash(s) {
var nd=window.open("hash.html");
nd.location.hash = s;
}
</script>
<h3>hash pour signet</h3>
<p>Cliquer un bouton ouvre son
<input type="button" value="1"
lien ds une nvelle fenêtre</p>
onclick="f_Hash('signet1')">
La commande pour créer le lien hypertexte est
<a href= url_cible> </a> (la cible est un fichier)
jeudi 4 avril 2019
-44/49-
22:46:09
ou
<a href= url_cible#place> </a> (la cible est un signet dans un fichier)
ou
<a href= #place> </a> (la cible est un signet dans le même fichier)
La nature de la cible peut être :
none , http:// , https:// , file:// , ftp:// , gopher:// , afs:// , nntp:// ,
telnet:// , wais:// , mailto: , news: , newsrc: ,...
La dynamisation de l’affichage de page :
On peut définir l’effet de transition de page ou de site (la façon dont une page
ou un site doit s’ouvrir et/ou se fermer), selon la syntaxe suivante.
Fusion (Blend)
Stores Verticaux (Blinds vertical)
Stores Horizontaux (Blinds Horizontal)
Rectangle extérieur (Box In)
Rectangle intérieur (Box Out)
Cercle Extérieur (Circle In)
Cercle Intérieur (Circle Out)
Damier Horizontal (Checkerboard Across)
Damier Vertical (Checkerboard Down)
Balayage Vertical Extérieur (Split Vertical
In)
Balayage Vertical Intérieur (Split Vertical
Out)
Balayage Horizontal Extérieur (Split Horizontal In)
Balayage Horizontal Extérieur (Split Horizontal Out)
Bandes coin supér droit (Strips Left Down)
Bandes coin infér droit (Strips Left Up)
Bandes coin supér gauche (Strips Right
Down)
Bandes coin infér gauche (Strips Right Up)
Dissolution Aléatoire (Random Disolve)
Barres Horizontales Aléatoires (Random Bars
Vertical)
jeudi 4 avril 2019
<meta http-equiv="Page-Enter" content="blendTrans(Duration=2)">
<meta http-equiv="Page-Exit" content="revealTrans(Duration=2,Transition=8)">
<meta http-equiv="Site-Exit" content="revealTrans(Duration=2,Transition=9)">
<meta http-equiv="" content="revealTrans(Duration=2,Transition=0)">
<meta http-equiv="Page-Enter" content="revealTrans(Duration=2,Transition=1)">
<meta http-equiv="Site-Enter" content="revealTrans(Duration=2,Transition=16)">
<meta http-equiv="Page-Enter" content="revealTrans(Duration=1.0,Transition=21)"
>
-45/49-
22:46:09
<meta http-equiv="Page-Enter" conBarres Verticales Aléatoires (Random Bars
tent="revealTrans(Duration=1.0,Transition=22)"
Horizontal)
>
<meta http-equiv="Site-Exit" conAléatoire (Random)
Balayage Haut (Wipe Up)
Balayage Haut (Wipe Down)
Balayage Gauche (Wipe Left)
Balayage Droite (Wipe Right)
tent="revealTrans(Duration=2,Transition=23)">
La gestion des cookies :
<script>
function Set_Cookie(
name, value, expires, path, domain, secure
) {
// set time, en millisecondes
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name + "=" +escape( value ) +
( ( expires ) ? "; expires=" + expires_date.toGMTString() : "" ) +
( ( path ) ? "; path=" + path : "" ) +
( ( domain ) ? "; domain=" + domain : "" ) +
( ( secure ) ? "; secure" : "" );
}
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";" , offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset , endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
jeudi 4 avril 2019
-46/49-
22:46:09
}
return null;
}
</script>
jeudi 4 avril 2019
-47/49-
22:46:09
Kinshasa, le jeudi 4 avril 2019 - 10:46:09 PM
Mots-clés :
javascript,map,ecmascript,regexp,arrays,string,getElementById,getElem
entsByName,attributs,lastChild,createElement,insertAdjacentElement,first
Child,fontVariant,selectedIndex,options,object,typeof,trycatch,anchor,Array, Boolean, Date, Function, Global, Math, Number, Object, RegExp, Regular Expression,string literal
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-Grand-Secret-deLa-Creation
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-Dosage-Des-Medicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-Des-Thermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-Introduction-Aux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-Christ-Pour-Quoi-Faire
jeudi 4 avril 2019
-48/4922:46:09
• 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-Objets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secret-de-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-d-IMC-indice-de-doduite-Selon-DrDiasoluka
• 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
• https://www.scribd.com/document/355291239/motilite-oculaire-I
• https://www.scribd.com/document/355290248/Script-d-Analyses-Des-Reflexes-Pupillomoteurs
• https://www.scribd.com/document/321168468/Renseignements-Id-et-Anthropometriques
• https://www.scribd.com/document/320856721/Emission-31-Jul-2016
• https://www.scribd.com/document/318182982/Complication-Visuelle-du-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-Entre-Oxymetrie-Et-Type-Respiration
• https://www.scribd.com/document/315746265/Classification-Des-Medicaments
• https://www.scribd.com/document/315745909/Incongruences-Heresies-et-Heterodoxies-de-la-Notion-deLaboratoire
• https://www.scribd.com/document/315745725/Rapport-Entre-Oxymetrie-Et-Type-Respiration
jeudi 4 avril 2019
-49/49-
22:46:09

javascript & algorithmique (3)

Transcription

Documents pareils

Plan de formation TÉLÉCONSEILLER

Télécharger la brochure

Script pour un compteur style mappemonde Désolé

R - Fiche tutoriale 2 : créer/éditer/exécuter un fichier script

script - Girardin, Brigitte

ACTIVITE 15 : CREER UN JEU DE POISSON SUR SCRATCH ( en

morgane esmingeot art

Comment créer un script sous Photoshop 7

Programmation de scripts pour la simulation de scénarios

Anime le