javascript tome ii

Transcription

javascript tome ii

Variables & Functions en JavaScript
Pour Débutant
J AVA S C R I P T (Programmation Internet) V O L . I I
J.B. Dadet DIASOLUKA Luyalu Nzoyifuanga
+243 - 851278216 - 899508675 - 995624714 - 902263541 - 813572818
[email protected]
Après le succès foudroyant du Vol I destiné à démontrer de faç on pragmatique et pratique la puissance du JavaScript à r é
soudre m ê me les probl è mes Math é matiques (*l’
algorithmique
d’
analyse des nombres de Kaprekar, *le calcul du carr é d’
un
nombre, *le carr é parfait, *les tests conditionnels, *quelques
diff é rences entre langage C et JavaScript, mais aussi *diff é
rents éditeurs de texte et leurs particularités), voici le VOL
II basé sur ECMAScript 2019 (= ES2019 ou ES10) et qui est premi
èrement destiné à enrichir mon mémento personnel mais aussi à
aider les autres dans leurs premiers pas dans ce langage.
Cette démarche saugrenue/surprenante, de commencer par le plus
complexe pour continuer par le plus simple, s’
explique par le
fait que nous voulions d’
abord faire l’
apologie du langage
=JavaScript (ex LiveScript, normalis é dans ECMASCRIPT)= avant
de nous lancer en douceur dans ses abysses et détails.
Cette série présentera de faç ons très élégante, les concepts
fondamentaux (de base, essentiels) permettant un engagement
progressif, plus profond et plus efficace dans ce langage.
C’
est aussi, une fois de plus, l’
occasion de remercier, honorer,
glorifier, adorer et aduler le Grand Dieu, tout Puissant Cr é
ateur de toutes choses qui existent (et celles qui n’
existent
pas encore mais qui existeront, visibles et cachées, connues et
ignor é es, imaginables et insoupç onnables...) pour toutes les
merveilles qu’
Il a toujours accomplies depuis bien avant m ê me
la création des univers, toutes les dimensions et tout ce qui
s’
y trouve y compris les intra- / extra-terrestres, les entités
biologicoïdes (fantô mes et esprits errants, sir è nes, elfs,
J.D.B. DIASOLUKA Nz. Luyalu
JavaScript Tome-II
gnomes, lutins...), et les entités éthériques non-biologiques
(extra-dimensionnels) qui lui doivent tous aussi Respect et Vé
nérations, et qui s’
il le veut, peut faire les pierres l’
adorer
en criant très fortement (Luc 19:40 Et Jésus répondant, leur
dit; Je vous dis que si ceux-ci se taisent, les pierres mêmes
crieront = chant des dû nes).
DIASOLUKA Nz. Luyalu
Docteur en Médecine, Chirurgie & Accouchements (1977),
CNOM : 0866 - Spécialiste en ophtalmologie (1980) Informaticienamateur, Programmeur et WebMaster.
Variables & Functions
- 2 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
INTRODUCTION :
Javascript (JS, à ne pas confondre avec JAVA d’Oracle - Sun Microsystems ) initialement LiveScript, livré pour la 1ère fois avec Netscape 2
début 1996 est un langage de script léger (scripting language =
lightweight programming language) Orienté Objet (OOP) créé en
1995 par l’ingénieur Brendan Eich [aik] de Netscape (né 1961 à
Pittsburgh en Pennsylvany, co-fondateur du projet Mozilla, de la fondation Mozilla et de la corporation Mozilla) et standardisé par l'organisme ECMA ( European Computer Manufacturers Association ) en
1996 et 1997 basé sur ECMAScript (ES) grâce aux spécifications ECMA-262 et ECMA-402. Il est régi par le TC39 (Technical
Committee 39, le Comité technique 39 qui fait évoluer JavaScript [en
5 stades : st0 : strawman – Soumission initiale des idées, st1 : proposal – demande écrite formelle, st2: draft – version initiale de la fonctionnalité avec deux implémentations expérimentales, st3: candidate
– la demande de la proposition est revissée avec les feedback des
fournisseurs des browsers, st4: finished – la proposition est prête
pour inclusion dans ECMASCRIPT puis JavaScript, TypeScript, les
browsers, Node.js…]).
Langage de Programmation Orienté Objet, il était initialement destiné
à dynamiser les pages Web c’est-à-dire les rendre interactives (dynamiques, conversationnelles, responsives, réactives à temps réel).
JavaScript est un interpréteur (compile à la volée), il exécute directement sans passer par la compilation qui génère un code objet intermédiaire (pour les anciens programmes de format .com) ou directement exécutable (programmes .exe).
Quelques implémentations de ECMAScript à ne pas confondre :
- 3 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
1. JavaScript (enrichissement d'ECMAScript),
2. JScript (variante de Microsoft lancé avec Internet Explorer 3),
3. EcmaScript (version standardisée de JS, dont la première en
1997). Il est plutôt dit que « ECMAScript is based on several orig-
inating technologies, the most well-known being JavaScript
(Netscape) and JScript (Microsoft). The language was invented
by Brendan Eich at Netscape and first appeared in that company's Navigator 2.0 browser. The development of the ECMAScript
Language Specification started in November 1996. The first edition of this Ecma Standard was adopted by the Ecma General Assembly of June 1997. » (https://tc39.github.io/ecma262).
4. ActionScript (variante d'Adobe).
JS est aujourd’hui l’outil par excellence pour manipuler/gérer tous
les aspects d’une page Web (éléments : balises, nodes de l’arbre hiérarchique [arborescence] HTML : DOM = Document Object Model =
un API (Application Programming Interfaces ) permettant d’accéder
à tous les noeuds [élément, chaîne, commentaire] d’une page WEB),
le style, les events (événements), lire et écrire les éléments HTML,
valider les entrées, éditer le texte de la page Web (ajouter, supprimer,
modifier/transformer), détecter le browser, créer les cookies, gérer
les likes...
JS n’est certes pas le seul langage pour ce faire, il y a aussi par
exemple le PHP, etc et le CSS avec ses «media queries», mais JS a été
parmi les premiers, le plus populaire et le plus facile à maîtriser
permettant même de manipuler dynamiquement les feuilles de style
CSS, il est aussi le plus facile à implémenter et à utiliser car contrairement au PHP par exemple, JS ne tient pas compte de la plate -forme
(serveur ou client=utilisateur final souvent un internaute).
De plus, un programme PHP DOIT préalablement être converti (par
le browser) côté client en code JS avant de s’exécuter.
- 4 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Un interpréteur JS est actuellement incorporé dans tout navigateur,
et s’exécute alors dans ce navigateur, mais JS peut aussi s’utiliser
dans d’autres environnements en dehors d’un navigateur (Serveur
Web : scripts ASP ; Plates-formes : projet Node.js ; bases de données :
MongoDB, Apache CouchDB (AdobeAcrobat) ; des consoles interactives d'exécution comme le Rhino ...).
JS a débordé de ses premiers objectifs, il est même utilisé comme
tout langage évolué (C/C++...) dans l’élaboration de logiciels complets et volumineux entièrement écrits en JS. Il y existe ainsi des logiciels complets et volumineux entièrement écrits en JavaScript, parmi
lesquels des traitements de textes, des logiciels de gestion et toutes
sortes d’autres logiciels...
Entrons dans le but de notre sujet, le JavaScript norme ES10
(ECMAScript 2019).
- 5 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
CHAPITRE 1 : Les COMMENTAIRES dans JavaScript
Si dans HTML les commentaires (textes inertes) se présentent sous une
seule forme comme suit :

JS quant à lui accepte quatre formes de commentaires :
1. Commentaire multiligne :
/*
lignes de commentaires */
2. Commentaires en ligne : :
2.a. Le double « slash »
// Commente jusqu’en fin de ligne.
2.b.
 » :
<script type="text/javascript"> "use strict";
function countdown(n) {
while (n --> 6) // "Tant que n-- > 6"
console.log(n+" --> "+Math.log(n));
- 6 / 99 -
jeudi, 4. avril 2019 (10:46 )
}
countdown(11)
</script>
10 --> 2.302585092994046
9 --> 2.1972245773362196
8 --> 2.0794415416798357
7 --> 1.9459101490553132
6 --> 1.791759469228055
JavaScript Tome-II
test.html:4:7
test.html:4:7
test.html:4:7
test.html:4:7
test.html:4:7
En fait « --> » n’est pas un opérateur comme tel, mais simplement le complexe [ opérateur de décrémentation « -- » espacé de son opérande (de
gauche) et suivi directement du signe supérieur à « > » ] donnant « -- > » :
Son similaire (aussi un peu truqué) :
function countdown(n) {
while (n ++< 10) // Incrément APRÈS.
console.log(n+" ++< "+Math.log(n));
}
countdown(5)
</script>
6 ++< 1.791759469228055
7 ++< 1.9459101490553132
8 ++< 2.0794415416798357
9 ++< 2.1972245773362196
10 ++< 2.302585092994046
test.html:4:7
test.html:4:7
test.html:4:7
test.html:4:7
test.html:4:7
CHAPITRE 2 : Les VARIABLES dans JavaScript
Comme tout langage de Programmation, JS utilise des variables (identifiants de cellules-mémoire) locales ou globales, des fonctions, et des objets (comportant des propriétés et méthodes= fonctions propres (intrinsèques, internes, intégrées / incorporées).
Les variables servent à associer un nom (identifiant) à un contenu d’une
- 7 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
partie de la mémoire de l’ordinateur ; ça peut être une donnée (un nombre,
un littéral, un objet) ou un code exécutable (function).
Mots-réservés à éviter comme identifiant :
await, abstract, arguments, boolean, break, byte, case, catch, char, class,
const, continue, debugger, default, delete, do, double, else, enum, eval, export, extends, false, final, finally, float, for, function, goto, if, implements,
import, in, instanceof, int, interface, let, long, NaN, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile,
while, with, yield.
En mode « "use strict"; », les mots suivants sont aussi réservés :
implements
interface
package
private
protected
public
Le code et les données dans JS doivent impérativement être contenus dans
l’élément SCRIPT imbriqué dans l’élément HEAD ou BODY tous deux
dans l’élément HTML. Pour ne pas ralentir le chargement (load) de la page,
la tendance actuelle est de placer les scripts juste avant la balise de fermeture </body>.
Syntaxe globale de l’élément SCRIPT pour du code local :
<html>
<head>
<script type="text/javascript" language="JavaScript">
...
</script>
</head>
<body>
...Éléments HTML...
<script language="JavaScript" type="text/javascript">
...
</script>
</body>
- 8 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
<script language="JavaScript" type="text/javascript">
...
</script>
</html>
Toutes les balises ci-dessus sont recommandées, mais pour un tout petit
script, seul l’élément SCRIPT est indispensable.
Par exemple un fichier ne contenant que ce code exécutera sans encombre :
<script> "use strict";
alert("Hello World!")
</script>
Rappelons que nous avons utilisé ici l’instruction « alert » pour l’affichage.
Il existe d’autres alternatives pour l’affichage :
<div id='id'></div>
document.write("document.write <br>");
document.writeln("document.writeln <br>");
document.getElementById('id').innerText+=
"document.getElementById('id').innerText ";
document.getElementById('id').innerHTML+=
"document.getElementById('id').innerHTML";
console.log("console.log");
console.dir("console.dir");
alert("alert")
print("print")
</script>
- 9 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Syntaxe de l’élément SCRIPT pour du code [dans un fichier] externe :
<script language="JavaScript"
type="text/javascript" src=URL>
</script>
<script language="JavaScript"
type="text/javascript"
src="myOwnSubdirectory/myOwn2ndJavaScript.js">
</script>
URL est l’emplacement du fichier de script qui peut être local à votre poste
de travail ou dans un réseau (LAN ou WEB) selon la syntaxe :
src="http://www.server.com/scriptfile.js"
ou
src="directory/scriptfile.js">
Déclaration / définition de variable :
Une variable peut être déclarée ou non, initialisée (valeur par défaut) ou pas
(« undefined »)
- 10 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Déclaration / définition de paramètres par défaut :
Un paramètre formel peut être déclaré ou non, initialisé (avec une valeur par
défaut ou implicite) ou pas (« undefined »).
let seek = _ => 5 ;
let arithm = (oper1 , oper2 = seek()) =>
oper1 * oper2;
console.log(arithm(10, 2));
console.log(arithm(20));
</script>
// 20
// 100
Exécution :
23:24:31,287
23:24:31,289
20
100
test.html:7:3
test.html:8:3
Un paramètre par défaut est celui qui est TOUJOURS pris en considération
avec la valeur lui définie quand la fonction appelante ne lui a pas envoyé
d’argument correspondant, mais prend éventuellement la valeur de
l’argument lui envoyé par la fonction appelante.
function ard(n,p=2){
return
Math.floor(((n*Math.pow(10,p+1))+5)/10)
/ Math.pow(10,p)
}
console.log(ard(Math.PI)) // 3.14
console.log(ard(Math.PI,2)) // 3.14
console.log(ard(Math.PI,0)) // 3
console.log(ard(Math.PI,-1)) // 0
console.log(ard(Math.PI,5)) // 3.14159
console.log((Math.PI).toFixed(5)) // 3.14159
console.log(ard(Math.PI,Math.E)) // 3.1411691558523307
- 11 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
console.log((Math.PI).toFixed(Math.E)) // 3.14
</script>
Sans paramètres par défaut (initialisés) :
<script type="text/javascript">
E = Math.E; // Le mode strict déclaré plus loin
///////// function f(p=5) { "use strict";
// SyntaxError: "use strict" not allowed
// in function with default parameter
// test.html:3:20
"use strict"; // Activation mode strict, n’affecte pas E.
function f(p) {
// paramètre simple.
const PI=Math.PI;
console.log(E+" & "+PI+" & "+p)
}
f(5); // Appel de la fonction avec argument.
</script>
Avec paramètre par défaut (initialisé), mais en mode standard !
N.B.: L’argument d’appel d’une fonction écrase la valeur par défaut du
paramètre formel de la fonction appelée.
E = Math.E; // mode strict déclaré après
function f(p=(a)=>{with(i in a){
console.log(i+"VRAI DUMMY")}
}) {
const PI=Math.PI;
console.log(E+" & "+PI+" & **"+p+"**")
}
f(); // Argument écrase paramètre par défaut.
- 12 / 99 -
jeudi, 4. avril 2019 (10:46 )
f([5,[1,"txt",{}],"Bull"]);
</script>
JavaScript Tome-II
Paramètre par défaut : pas supporté par les anciens navigateurs :
Opera 12 :
[10/02/2018
09:44:14]
JavaScript
file://localhost/K:/test.html
Inline script compilation
Syntax error at line 2 while loading: expected ')', got '='
function ard(n,p=2){
-----------------^
-
Acoo Browser Version 1.98 build 744 Unicode 2008 :
Ligne: 2
Car: 18
Erreur:
')' attendu
Code: 0
URL: file:///K:/test.html
Maelstrom Version 37.0.2.1 (5920655) 2018 :
Uncaught SyntaxError: Unexpected token = test.html:2
A. La définition d’un paramètre formel par défaut peut puiser sa valeur
dans un des paramètres qui le précède mais l’inverse n’est pas vrai :
- 13 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
let arithm = (oper1 = oper2 * 4 , oper2) =>
oper1 * oper2;
// ReferenceError: can't access lexical declaration
// òper2' before initialization
test.html:2:1
console.log(arithm(undefined, 20));
</script>
// 100
B. Syntaxe correcte de définition d’un paramètre par défaut :
let arithm = (oper1 , oper2 = oper1/4) =>
oper1 * oper2;
console.log(arithm(10, 2)); // 20
console.log(arithm(20));
// 100
console.log(arithm(20, undefined));
console.log(arithm(20, null));
</script>
// 100
// 0
Exécution :
23:28:01,876
23:28:01,878
08:30:04,521
08:30:04,521
20
100
100
0
test.html:5:3
test.html:6:3
test.html:7:3
test.html:8:3
C. Un paramètre formel par défaut ne peut pas se référer à un autre paramètre formel déclaré après lui :
08:39:28,460
08:39:28,463
08:39:28,463
08:39:28,463
20
NaN
NaN
0
- 14 / 99 -
test.html:5:3
test.html:6:3
test.html:7:3
test.html:8:3
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Déclaration explicite de variable non initialisée :
var v
Les codes exécutables dans JavaScript doivent impérativement être contenus dans l’élément SCRIPT.
<script>
let l ;
alert(l) ;
var v ;
alert(v) ;
const c ;
alert(c) ;
</script>
Voici ce que JS affiche à son exécution :
Firefox :
Yandex :
Une constante doit obligatoirement être initialisée, puisque par la suite on
ne peut plus lui affcter une valeur. En corrigeant donc cette erreur de non
affectation d’une valeur lors de la définition de la constante, on peut avoir
les affichages suivants (alert() est une méthode (fonction) de l’objet window (donc espace global) ; elle affiche un pop-up [=fenêtre surgissante] à
l’écran) :
- 15 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Initialisation de variable non explicitement déclarée (définition et déclaration implicite de variable, valable seulement en mode normal = sloppy
moce). Ici, on initialise la variable à la date en cours.
<script>
v=new Date() ;
- 16 / 99 -
jeudi, 4. avril 2019 (10:46 )
alert(v)
</script>
JavaScript Tome-II
Avec Firefox :
Avec Yandex :
Avec document.write() :
Tue Dec 19 2017 18:20:49 GMT+0100 (Paris, Madrid)
Variables « clés-valeurs » (intuitif) ;
// Les clés-vals dans l'objet o.
var o = {20:5, k:4, 30:7, no:0, 10:9};
for(var [cle , val] of Object.entries(o))
console.log("*"+cle+' ^ '+val);
- 17 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Object.entries(o).forEach(([cle , val]) =>
console.log(cle+' : '+val));
// forEach est une function d’itération.
</script>
*10 ^ 9
*20 ^ 5
*30 ^ 7
*k ^ 4
*no ^ 0
/
/
/
/
/
10 : 9
20 : 5
30 : 7
k : 4
no : 0
test.html:6:8
test.html:6:8
test.html:6:8
test.html:6:8
test.html:6:8
/
/
/
/
/
9:8
9:8
9:8
9:8
9:8
I. Le mode (variante) strict de JavaScript :
JavaScript standard est un langage hypercompliant (très peu rigoureux, plutôt très tolérant). Pour le rendre plus rigoureux / exigeant, utilisez le pragma
/ directive « use strict »; » comme toute première directive/instruction
(donc au tout début) du boc du corps de la fonction après les « (){ » ou juste
après la balise <script>. Les détails sur « use strict; » sur :
https://developer.mozilla.org/en US/docs/Web/JavaScript/Reference/Strict_mode .
La portée du pragma / directive « use strict»; » est seulement dans la portée
lexicale « lexical scope ».
Donc, deux modes de fonctionnement du JavaStript : Le JavaScript standard (mode non strict = « sloppy mode ») et le JavaScript strict.
Le mode strict s'applique seulement à des scripts entiers ou à des fonctions
individuelles, mais pas à des blocs d'instructions (entourés d'accolades =
curly brackets {}). Les fonctions imbriquées d’une fonction en mode strict
sont elles aussi de mode strict.
Le mode strict est activé avec le pragma
"use strict";
Cette directive doit figurer juste après la balise d’ouverture <script> ou
- 18 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
l’accolade ouvrante du corps d’une fonction, c’est-à-dire avant toute autre
instruction à part les commentaires.
Scope (contexte d’exécution), Domaine, Portée, Étendue, Visibilité, Accessibilité et durée de vie avec le mot-clé « var » :
v=25;
function fct(){
// Déclaration/définition de fonction
v='...série d\'instructions...';
console.log("v="+v);
// v=...série d'instructions
var v=100;
// déclarée locale, APRÈS avoir été utilisée.
}
fct();
// Appel à la fonction
console.log("v="+v); /* v=25 */
// v=...série d'instructions...
// v=25
test.html:14:2
</script>
test.html:7:4
La déclaration var :
En réalité le mot-clé var sert à déclarer une variable comme locale c’està-dire « visible / accessible seulement dans le scope de sa déclaration ».
Le mot-clé var sert à deux choses :
1. Déclarer une variable locale « visible / accessible seulement dans le
scope (portée ou étendue, corps de la fonction) de sa déclaration » qui
est le domaine du bloc de la fonction dans laquelle la variable est déclarée, même pas par à une éventuelle fonction englobante. Dès que la
fonction est quittée, l’espace lui affecté (qu’elle pointe) est désalloué
(libéré) avec tout son contenu (code et données [variables locales]) :
Durée de vie = période d’exécution de la fonction.
- 19 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Sans le mot-clé var, la variable est visible de partout (portée/visibilité
globale) dans le fichier en cours et dans d’autres fichiers.
2. Déclarer (créer un espace-mémoire de stockage pour) une variable
non initialisée « undefined ».
Déclarée comme var en dehors de toute fonction (mais dans un élément
SCRIPT), la variable est du scope WINDOW = globale (à ne pas confondre avec WINDOWS).
var a = 'colobome';
function f(){
var a = 'Locale';
console.log(a , window.a);
// Locale colobome
}
console.log(a , window.a);
// colobome colobome
f();
</script>
colobome colobome test.html:9:4
Locale colobome
test.html:5:8
Déclarée dans une fonction, le scope de « var » se limite dans cette
fonction [et ses fonctions imbriquées].
<script>
function f() {
var v=new Date() ;
}
alert(v)
// Uncaught ReferenceError: v is not defined
</script>
- 20 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Ici, la fonction f() n’est pas invoquée et donc jamais exécutée. La variable
v n’est donc ni effectivement déclarée, ni définie ni initialisée. Elle est donc
invisible aussi bien dans le bloc de la fonction qu’en dehors de la fonction.
Même après appel/exécution de la fonction f() dans laquelle la variable déclarée var (locale) a été définie, elle est toujours invisible en dehors [du
bloc] de cette fonction.
<script>
function f() {
var v=new Date() ;
}
f();
alert(v);
</script>
Exécution:
Uncaught ReferenceError: v is not defined
at var.html:6
« var.html » est le nom de notre fichier JavaScript
Sans le mot-clé var, la variable v est globale et donc visible et accessible
de partout même dans une autre fonction (portée globale) :
<script>
function f() { v=new Date("11,Aug,1953") ; }
f();
// Appelée APRÈS définition.
fv();
// Appelée AVANT définition.
function fv(){ alert(v); }
</script>
Après suppression du mot-clé var, la variable « v » est maintenant visible de partout même dans une autre fonction.
Tue Aug 11 1953 00:00:00 GMT+0100 (Paris, Madrid)
- 21 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Lors du chargement d’un fichier, les objets sont parsés (analysés), particulièrement les scopes des portées des variables. C’est à la fin du chargement
de tout le fichier (event = onload) que débute l’exécution des fonctions non
inline. Dans JS les déclarations de variable pouvant se faire n’importe où,
une redéclaration dans le même scope d’une variable globale en variable
locale avec var rend sa visibilité locale.
j=11, m = -25, a=1953;
function fext(){
j=3957;
//
m=8;
//
var a=2017; //
var j;
//
lisée.
Jusqu'ici j est globale, = 11.
m globale écrase -25 -> 8
Déf variable a=2017 locale.
Force j en locale malgré déjà uti-
function fint(){
var m=new Date(); // m locale à fint() = Date.
console.log("* Dans fint()")
console.log("m="+m+" j="+j+" a="+a)
} // Fin function fext(){
fint() ;
console.log("* Dans fext(), "+
"m="+m+" j="+j+" a="+a)
// Ds fext() et partout, m=8
}
// Fin function fext(){
fext();
// j et a = globales, m = modifiée ds fext(),
console.log("* Dans espace gobale: "+
" j="+j+" m="+m+" a="+a)
//
11
8
1953
</script>
- 22 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
// * Dans fint()
// m=Fri Oct 12 2018 08:56:25 GMT+0100
a=2017 test.html:13:7
// * Dans fext(), m=8 j=3957 a=2017
// * Dans espace gobale: j=11 m=8 a=1953
test.html:12:4
(Paris, Madrid) j=3957
test.html:18:4
test.html:27:2
Les blocs ordinaires n’ont pas de portée limitée. À la sortie d’une boucle,
les variables locales « var » du bloc de la boucle persistent :
j=11, m = -25, a=1953;
for(k=0;k<5;k++){
var m=new Date();
// m locale à fimbriquee().
}
console.log("k="+k+" , m = "+m.toLocaleString());
// k=5 , m = 23/12/2017 à 02:12:19
</script>
Autre exemple :
<script>
for (k = 0; k <= 5; k++){
var f = function() {
return function(x){return k + x;};
}
if (k == 0) {fct1 = f(); };
if (k == 5) {fct2 = f(); };
}
console.log(fct1(3));
console.log(fct2(6));
</script>
XI.
// 9
// 12
Particularités de const, let et var :
Alors que JS en sloppy mode (mode standard) autorise d’utiliser une
variable sans la déclarer au préalable, JS en mode strict ("use strict" ;)
n’accepte pas d’utiliser une variable non, déclarée (avant ou après sa
- 23 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
première utilisation dans un scope donné).
En mode sloppy :
d=Date(); console.log(d);
// Sat Feb 24 2018 22:21:20 GMT+0100 (Paris, Madrid)
</script>
En mode « use strict » :
//
// [YANDEX]
// Uncaught ReferenceError: d is not defined
//
// [FIREFOX]
// ReferenceError: assignment to undeclared variable d
</script>
Variable déclarée avec « var » après sa première utilisation :
var d;
</script>
Contraire à « var », « let » n’admet pas de déclaration différée de variable :
let d;
// ReferenceError: can't access lexical
// declaration `d' before initialization [FIREFOX]
//
// Uncaught ReferenceError:
- 24 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
// d is not defined at test.html:2 [YANDEX]
// Uncaught ReferenceError: d is not defined [BAIDU]
</script>
De même contraire à « var », « let » n’admet pas de déclaration ni de
redéfinition de la même variable dans le même scope :
var v;
var v;
let l;
let l;
/* FIERFOX : SyntaxError:
redeclaration of let l
test.html:6:5
note: Previously declared at line 5, column 5
YANDEX :
Uncaught SyntaxError:
Identifier 'l' has already been declared
</script>
*/
Tandis que « const » exige l’initialisation pendant l’unique déclaration
(n’accepte ni une réaffectation ni une redéclaration dans la même portée
de bloc).
const d;
/* SyntaxError: missing = in const declaration [FIREFOX]
Uncaught SyntaxError:
Missing initializer in const declaration [YANDEX]
Uncaught SyntaxError: Unexpected token ; [BAIDU] */
</script>
Les valeurs des propriétés d’un objet const peuvent cependant être modifiées :
const obj = {id: 'dias'};
////// obj = {id: 'wille'};
// TypeError:
- 25 / 99 -
"use strict";
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
//
invalid assignment to const òbj' [FIREFOX]
// Uncaught TypeError:
//
Assignment to constant variable.[YANDEX]
obj.id = 'wille';
console.log(obj); // Object { id: "wille" }
</script>
Dans les deux modes (sloppy et strict), une variable ou une expression
de fonction ne peuvent être déclarées qu’avec l’un des trois mots clés
suivants : const, let ou var, avec les spécificités suivantes :
1.
« const » (définit une entité constante, identificateur qui ne peut être
redéfini) et « let » (définit une variable ou une expression de fonction) sont de portée (scope = domaine) bloc quel qu’il soit :
{ let li=7 ; {console.log(li) /* 7 */} };
console.log(li)
// ReferenceError: li is not defined [FIREFOX]
// Uncaught ReferenceError: li is not defined [YANDEX]
</script>
{ const ci=10 ; {console.log(ci) /* 10 */} };
console.log(ci)
// ReferenceError: ci is not defined [FIREFOX]
// Uncaught ReferenceError: ci is not defined [YANDEX]
</script>
2.
Une entité « const » ne peut être redéclarée, redéfinie ou réaffectée :
const cf=function(){console.log(Date())};
cf();
cf=function(){console.log(Math.PI)};
// YANDEX :
// Uncaught TypeError: Assignment to constant variable.
// FIREFOX :
// TypeError: invalid assignment to const `cf'
- 26 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
// BAIDU :
// Uncaught TypeError: Assignment to constant variable.
</script>
3. « var » est de scope bloc de fonction ou fichier :
let lg=5; const cg=20 ;
{ // Bloc vraiment ordinaire.
var vb=15;
console.log(cg) // 20. Visible ds bloc imbriqué.
}
console.log(lg, cg, vb) // 5 20 15
// vb est visible en dehors du bloc ordin,
// mais ne le serait pas hors un bloc de fct,
// cfr ci-dessous.
const cf=function(){var vf=10;}
console.log(vf);
// Uncaught ReferenceError: vf is not defined [BAIDU/YANDEX]
// ReferenceError: vf is not defined [FIREFOX]
</script>
4. const DOIT être initialisé au même moment que sa déclaration,
const c2;
// SyntaxError: missing = in const declaration [FIREFOX]
// Uncaught SyntaxError: Missing initializer in const declaration [YANDEX]
// Uncaught SyntaxError: Unexpected token ; [BAIDU]
c2="const";
</script>
5. « var » et autres dans définition de fonction non expression :
En mode strict, une expression de fonction DOIT être précédée de var,
const ou let pour la définition / déclaration de fonction. Mais la définiVariables & Functions
- 27 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
tion simple de fonction ne doit jamais commencer par ces mots clés.
function f(){console.log(Math.SQRT2)};
f(); // 1.4142135623730951
</script>
const function lf(){console.log(Math.SQRT2)};
// SyntaxError: missing variable name [FIREFOX]
// Uncaught SyntaxError: Unexpected token function [YANDEX]
</script>
var function vf(){console.log(Math.SQRT2)};
// SyntaxError: missing variable name [FIREFOX]
// Uncaught SyntaxError: Unexpected token function [YANDEX]
</script>
let function lf(){console.log(Math.SQRT2)};
// SyntaxError: let is a reserved identifier [FIREFOX]
// Uncaught SyntaxError: Unexpected strict mode reserved
word [YANDEX]
</script>
Si une const ne peut être ni redéclarée, ni redéfinie, ni réaffectée, la
valeur qu’elle renferme peut cependant être changée :
const arr = ['A','B'];
const C = arr;
// arr et C ne peuvent être
// redéclarés, redéfinis, ou réaffectés.
console.log(C);
// Array [ "A", "B" ]
// Mais la valeur de arr ou de C peuvent changer
// Méthode directe via les éléments.
[ arr[0],arr[1] ] = ['X' , 'Z'];
console.log(C);
- 28 / 99 jeudi, 4. avril 2019 (10:46 )
// Array [ "X", "Z" ]
JavaScript Tome-II
arr[0]= ["autre","array"] ;
arr[1] = {'X':'x' , 'Z':'z'};
console.dir(C);
console.dir(arr);
// […] , 0: "Zéro" , 1: "Un" , 2: "spl2" , 3: "PUSHÉ"
// length: 4
// Méthode directe via les méthodes...
arr.push('PUSHÉ');
arr.splice(1,1,"spl1","spl2");
console.log(C);
// Array [ […], "spl1", "spl2", "PUSHÉ" ]
// […], 0: "Zéro", 1: "Un", 2: "spl2", 3: "PUSHÉ"
// length: 4
// La valeur de arr ou de C peuvent aussi changer
// par Méthode indirecte (p.e. du sein d'une fonc-tion)
console.log("fct(C)= ",fct(C));
console.log("C=",C); // constante comme argument.
console.log("arr=",arr);
// Array [ "Zéro", "Un", "spl2", "PUSHÉ" ]
// […], 0: "Zéro", 1: "Un", 2: "spl2", 3: "PUSHÉ"
// length: 4
function fct(p){
p[0]="Zéro", p[1]="Un";
return p;
}
</script>
Note :
Une propriété d’un objet ou membre/élément d’Array ne peut se déclarer
avec var. Signalons que les indexes dans une Array sont juste des propriétés énumerables avec comme noms, des entiers, et sont semblables aux
propriétés d'un objet en général.
Signalons aussi que chaque propriété d’un objet possède 4 attributs :
https://www.ecma-international.org/ecma-262/8.0/
- 29 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
6.1.7.1 Property Attributes
Attributes are used in this specification to define and explain the state of Object properties. A data property associates a key value with the attributes listed in Table 2.
Table 2: Attributes
of a Data Property
Attribute Name
Value Domain
Description
[[Value]]
Any ECMAScript The value retrieved by a get access of the
language type
property.
[[Writable]]
Boolean
If false, attempts by ECMAScript code to
change the property's [[Value]] attribute
using [[Set]] will not succeed.
[[Enumerable]]
Boolean
If true, the property will be enumerated by a
for-in enumeration (see 13.7.5). Otherwise,
the property is said to be non-enumerable.
[[Configurable]]
Boolean
If false, attempts to delete the property,
change the property to be an accessor property, or change its attributes (other than
[[Value]], or changing [[Writable]] to false)
will fail.
Illustration :
<script>
let ob={3:"Cataracte" , glc:"Glaucome" ,
"arr":["Cataracte" , "Glaucome"]};
console.log(
Object.getOwnPropertyDescriptors(ob)
);
/* Affiche
Object { 3: {…}, glc: {…}, arr: {…} }
3:{value: "Cataracte", writable: true, enumerable: true,
configurable: true}
arr:{value: Array(2), writable: true, enumerable: true,
configurable: true}
glc:{value: "Glaucome", writable: true, enumerable: true,
configurable: true}
- 30 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
__proto__:Object
*/
/*
"arr":["Cataracte" , "Glaucome"]} */
console.log(
Object.getOwnPropertyDescriptors(ob[3])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, 8: {…}, length: {…} }
0:{value: "C", writable: false, enumerable: true, configurable: false}
1:{value: "a", writable: false, enumerable: true, configurable: false}
2:{value: "t", writable: false, enumerable: true, configurable: false}
4:{value: "r", writable: false, enumerable: true, configurable: false}
6:{value: "c", writable: false, enumerable: true, configurable: false}
8:{value: "e", writable: false, enumerable: true, configurable: false}
length:{value: 9, writable: false, enumerable: false, configurable: false}
- 31 / 99 -
jeudi, 4. avril 2019 (10:46 )
__proto__:Object
*/
/*
JavaScript Tome-II
console.log(
Object.getOwnPropertyDescriptors(ob["3"])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, 8: {…}, length: {…} }
__proto__:Object
- 32 / 99 -
jeudi, 4. avril 2019 (10:46 )
*/
/*
JavaScript Tome-II
console.log(
Object.getOwnPropertyDescriptors(ob.glc)
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, length: {…} }
0:{value: "G", writable: false, enumerable: true, configurable: false}
1:{value: "l", writable: false, enumerable: true, configurable: false}
3:{value: "u", writable: false, enumerable: true, configurable: false}
5:{value: "o", writable: false, enumerable: true, configurable: false}
6:{value: "m", writable: false, enumerable: true, configurable: false}
__proto__:Object
*/
/*
- 33 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
console.log(
Object.getOwnPropertyDescriptors(ob["glc"])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, length: {…} }
6:{value: "m", writable: false, enumerable: true, configurable: false}
__proto__:Object
*/
/*
console.log(
Object.getOwnPropertyDescriptors(ob["arr"])
- 34 / 99 -
jeudi, 4. avril 2019 (10:46 )
);
/*
Object { 0: {…}, 1: {…}, length: {…} }
JavaScript Tome-II
0:{value: "Cataracte", writable: true, enumerable: true,
configurable: true}
1:{value: "Glaucome", writable: true, enumerable: true,
configurable: true}
length:{value: 2, writable: true, enumerable: false, configurable: false}
__proto__:Object
*/
/*
console.log(
Object.getOwnPropertyDescriptors(ob["arr"][0])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, 8: {…}, length: {…} }
- 35 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
__proto__:Object
*/
//
//
"arr":["Cataracte" , "Glaucome"]}
console.log(
Object.getOwnPropertyDescriptors(ob["arr"][1])
);
/*
Ob-ject { 0: {…}, 1: {…}, 2: {…}, 3: {…}, 4: {…}, 5: {…},
6: {…}, 7: {…}, length: {…} }
6:{value: "m", writable: false, enumerable: true, configuVariables & Functions
- 36 / 99 -
jeudi, 4. avril 2019 (10:46 )
rable: false}
JavaScript Tome-II
__proto__:Object
*/
</script>
An accessor property associates a key value with the attributes listed in Table 3.
Table 3:
Attributes of an
Accessor Property
Attribute Name
Value Domain
Description
[[Get]]
Object | Undefined If the value is an Object it must be a function object. The function's [[Call]] internal
method (Table 6) is called with an empty
arguments list to retrieve the property
value each time a get access of the property is performed.
[[Set]]
Object | Undefined If the value is an Object it must be a function object. The function's [[Call]] internal
method (Table 6) is called with an arguments list containing the assigned value as
its sole argument each time a set access of
the property is performed. The effect of a
property's [[Set]] internal method may, but
is not required to, have an effect on the
value returned by subsequent calls to the
property's [[Get]] internal method.
[[Enumerable]]
Boolean
If true, the property is to be enumerated by
a for-in enumeration (see 13.7.5). Otherwise, the property is said to be nonenumerable.
[[Configurable]]
Boolean
If false, attempts to delete the property,
change the property to be a data property,
- 37 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
or change its attributes will fail.
If the initial values of a property's attributes are not explicitly specified by this specification, the default value.
Table 4: Default Attribute Values Attribute Name
[[Value]]
Default Value
undefined
[[Get]]
undefined
[[Set]]
undefined
[[Writable]]
false
[[Enumerable]]
false
[[Configurable]]
false
Plusieurs façons d’appeler une fonction :
// Direct
fct("","deuxième");
// Ds fct = fct(,deuxième)
// Via alias
var funcname=fct
funcname();
// Ds fct = fct(undefined,undefined)
// Via NOM de la fonction dans une chaîne
window["fct"]("premier","deuxième");
// Ds fct = fct(premier,deuxième)
// Fonction comme paramètre objet
function go1(p,a1,a2){
p(a1,a2);
}
go1(fct,"année",2018)
// Ds fct = fct(année,2018)
- 38 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
// Fonction comme paramètre chaîne
function go2(p,a1,a2){
window[p](a1,a2);
}
go2("fct",Math.PI,Math.E)
// Ds fct =
fct(3.141592653589793,2.718281828459045)
// Avec eval()
function go3(p){
eval(p);
}
go3("fct(Math.E,Math.PI)")
// Ds fct =
fct(2.718281828459045,3.141592653589793)
//////////////////////////
// La fonction à appeler
//////////////////////////
function fct(){
console.log(
"Ds fct = " + fct.name +
"("+arguments[0]+","+arguments[1]+")"
);
}
</script>
Une façon saugrenue d’utiliser des variables locales :
<script type="text/javascript"> ùse strict`;
const f = (p, v, ...r) => {
r[0] = "essai1";
r[1] = "essai2";
r[2] = "essai3";
console.log(p, v, r[0], r[1], r[2]);
p = "Subst1";
v = "ubst2";
- 39 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
console.log(p, v, r[0], r[1], r[2]);
};
f("un", "deux");
</script>
Variables locales « static » en JavaScript ;
Une « variable locale static » est une variable définie dans une fonction
mais qui garde sa valeur même quand la fonction est quittée. JS ne comporte pas une telle sorte de donnée. Comment y suppléer ?
Un LexicalEnvironment est créé pour chaque fonction lors de son exécution. Cet environnement stocke les variables paramètres, les variables locales (déclarées dans la fonction avec var) et les fonctions imbriquées déclarées. Normalement, à la fin de l’exécution de la fonction, son environnement lexical est détruit, avec toutes les variables locales [déclarées avec
var].
Mais dès qu’une fonction englobe une autre (fonction englobante) et retourne cette dernière (fermeture ou closure) son environnement lexical n’est
plus détruit mais conservé à la fin de son exécution.
En quittant une fonction comportant une fonction imbriquée et retournée
par la fonction contenante / englobante, tout l’environnement (variables
locales et fonctions) de la première fonction [contenante] persistent dans un
objet interne appelé « LexicalEnvironment » de la première fonction, et
peuvent servir de (être utilisés comme) variables static exactement comme
celles des langages C/C++, et dans une fonction récursive. Cet environnement et ses variables persistent (durée de vie), comme les variables globales,
jusqu’à la décharge (fermeture) du document.
function f(){
- 40 / 99 -
jeudi, 4. avril 2019 (10:46 )
var b = "b";
JavaScript Tome-II
return function f2(){ // f() retourne adresse de f2.
return b; // retourne la valeur de la variable b.
}
}
var n = f();
alert(n());
</script>
La fonction f() retourne un pointeur sur la fonction f2() qui elle, retourne la
valeur en cours de la variable b, qui est "b".
Du fait que la fonction f() est une fonction retournante, son environnement
n'est pas détruit à sa sortie, et toutes ses variables y compris les LOCALES
(déclarées var) sont préservées.
var n = f(); La variable « n » reçoit la valeur retournée par f() qui est
un pointeur sur la fonction interne retournée f2(). La fonction f2() est ce
qu’on appelle « closure ».
Puisque n contient l'adresse d'une fonction =en l'occurrence la fonction
f2()=, on peut appeler cette dernière avec « n, suivie de parenthèses n() », ce
qui affiche la valeur en cours de la variable b qui est dans l'environnement
de f() qui n'a pas été altéré depuis la sortie de cette fonction f().
En appelant f(), par exemple alert(f()); on affiche le contenu à
l'adresse retournée par f() =celle de la fonction f2()=, et le contenu à
l'adresse d'une fonction cfr la f2(), c'est le code de cette fonction.
L’identifiant f2 ne sert absolument à rien, sauf à faciliter les explications ici.
La variable b peut être modifiée, mais bien entendu, seulement par les fonctions qui ont accès à elle, et durant la période de leur exécution.
Exemple concret de Variable locale statique :
- 41 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Chaque variable locale statique nouvellement créée possède son propre
environnement lexical, ce qui permet de créer plusieurs variables locales
statiques indépendantes à partir d’un seul et même complexe de fonctions.
"use strict"; const cl=console.log;
function f(){
var b = 10;
return function f2(){
return b++;
}
// f2 retourne la valeur incrémentée de la variable b.
} // f() retourne adresse de f2().
var m = f(); // 1er environnement lexical
var n = f(); // 2e environnement lexical.
cl(m());
cl(m());
cl(n());
cl(m());
cl(n());
</script>
Exécution :
Altération complexe d’une Variable locale statique :
function f() {
var x=0 ; // pseudo static
/**/
const f2 = function(y){ x += y ; return [y,x];
/**/
return f2;
// ou tout court
/* return function(y){ x += y ; return [y,x]; } */
- 42 / 99 jeudi, 4. avril 2019 (10:46 )
}
// x == x après addition.
}
JavaScript Tome-II
let fct=f(); // Valeur retournée par f();
for(let k=2;k<5;k++){
var r = fct(k * ((Math.random()*10) | 0));
// Partie entière seulement
console.log("y==(k*Math...)=="+r[0]+" | x=="+r[1]+
" | x+=y=="+(1*r[1]+r[0]));
}
</script>
y==(k*Math...)== 6 | x== 6 | x+=y==12
y==(k*Math...)==15 | x==21 | x+=y==36
y==(k*Math...)==24 | x==45 | x+=y==69
test.html:16:5
test.html:16:5
test.html:16:5
Note:
Si vous écrivez « * x+=y=="+(r[1]+r[0])) » au lieu de « *
x+=y=="+(1*r[1]+r[0])) » vous aurez une concaténation (addition
de Strings ou littérale) au lieu d’une addition arithmétique.
Diverses manipulations d’une même variable statique
"use strict" ; const cl=console.log;
function genStatVar (a){
let statVar=a||10; // Par défaut =10.
cl(`*** statVar==${statVar}`);
return function fct(a,b){
if(a=="inc") return ++statVar;
else if(a=="dec") return --statVar;
else if(a=="exp") return statVar=Math.pow(statVar,b);
else if(a=="root") return statVar=Math.pow(statVar,1/b);
else if(a=="add") return statVar+=b;
else if(a=="sub") return statVar-=b;
else return "undefined parameter";
- 43 / 99 -
jeudi, 4. avril 2019 (10:46 )
}
}
let incV = genStatVar();
cl(incV());
cl(incV("inc"));
cl(incV("exp"));
incV = genStatVar(5);
cl(incV("exp",3));
cl(incV("dec"));
cl(incV("add",4));
cl(incV("root",7));
cl(incV("sub",-8));
</script>
JavaScript Tome-II
//
//
//
//
*** statVar==10
undefined parameter
11
NaN
//
//
//
//
//
//
*** statVar==5
125
124
128
2
10
Ci-dessous, voyez comment créer de multiples variables locales statiques, et
comment l'environnement lexical de chacune des variables statiques est
bien préservé.
"use strict" ; const cl=console.log;
function genStatVar (a,b){
let statVar=b||10;
cl(`*** statVar==${statVar}`);
if(a=="inc") return function(){
return ++statVar;
}
else if(a=="dec") return function(){
return --statVar;
}
else if(a=="exp") return function(b){
return statVar=Math.pow(statVar,b);
}
else if(a=="root") return function(b){
return statVar=Math.pow(statVar,1/b);
}
else if(a=="add") return function(x){
let y=x||statVar;
return statVar+=y;
}
- 44 / 99 -
jeudi, 4. avril 2019 (10:46 )
else if(a=="sub") return function(){
return statVar-=b;
}
else return function(){
return "undefined parameter";
}
}
// Inc
let incV = genStatVar("inc"); //
cl(incV());
// 11
cl(incV());
// 12
JavaScript Tome-II
*** statVar==10
// Inc , 5 (nouvel environnement lexical)
incV = genStatVar("inc",5); // *** statVar==5
cl(incV());
// 6
cl(incV());
// 7
// Exp , 2
let exp2 = genStatVar("exp",2); //
cl(exp2(4));
// 16
cl(exp2(2));
// 256
*** statVar==2
// Avec le dernier environnement lexical de incV
cl(incV());
// 8
// Exp , 10 (nouvel environnement lexical)
let exp2_5 = genStatVar("exp"); // *** statVar==10
cl(exp2_5(3));
// 1000
// Avec le dernier environnement lexical de exp2
cl(exp2(2));
// 65536
// Avec le dernier environnement lexical de exp2_5
cl(exp2_5(2));
// 1000000
// Avec le dernier environnement lexical de incV
cl(incV());
// 9
// root , 1000000
let rootV = genStatVar("root",1000000); // *** statVar==1000000
cl(rootV(2));
//
1000
cl(rootV(3));
// 9.999999999999998
- 45 / 99 -
jeudi, 4. avril 2019 (10:46 )
// add , 15
let addV = genStatVar("add",15); //
cl(addV());
// 30
cl(addV());
// 60
cl(addV(-10));
// 50
JavaScript Tome-II
*** statVar==15
// add , default
addV = genStatVar("add"); // *** statVar==10
cl(addV());
// 20
cl(addV());
// 40
cl(addV(-10));
// 30
// undefined
let dummy = genStatVar();
cl(dummy());
cl(incV());
cl(exp2(2));
cl(exp2_5(1));
</script>
//
//
//
//
//
*** statVar==10
undefined parameter
10
4294967296
1000000
Variable statique via un générateur
Une autre façon de créer/gérer les variables locales statiques c’est via un
générateur.
let disp = (locGenPrev,locGenFibo,locGenVar,p) => {
if(p==1)console.log(locGenPrev,locGenFibo,locGenVar);
else if(p==2){
console.log(locGenPrev,locGenFibo,locGenVar+
"= "+locGenPrev+"+"+locGenFibo);
console.log(locGenPrev+" -> "+ locGenFibo,
" , ",locGenFibo+" -> "+locGenVar);
}
else if(p==3){
console.log(locGenPrev);
console.log(locGenFibo);
console.log(locGenVar);
}
}
</script>
- 46 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
"use strict";
function* createlocGenFiboGenerator() {
let locGenFibo=1, locGenVar, locGenPrev=0;
while (true) {
/**/
disp(locGenPrev,locGenFibo,locGenVar,1);
locGenVar = locGenPrev+locGenFibo;
/**/
disp(locGenPrev,locGenFibo,locGenVar,2);
locGenPrev=locGenFibo , locGenFibo=locGenVar;
yield [
(locGenFibo*2) + ". "+
1*(2000+Math.trunc(Math.random()*1000)),
"instant "+new Date().getTime()]
}
}
const ar=[
"Xérophtalmie","Entropion", "Rétinoblastome",
"Hyperphorie","Épiphora","Gérontoxon"
];
const l=ar.length;
let txt = " Les "+l+" maladies enregistrées ",
tl= txt.length+5;
console.dir(txt.padStart(tl,"*").padEnd(tl+5,"*"));
console.dir("".padEnd(tl+5,"*"));
txt=" DBL FIBONACCI ";
- 47 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
tl= txt.length+5;
console.dir(
"DANS NOTRE "+txt
.padStart(tl,"*").padEnd(tl+8,"*"));
console.dir("".padEnd(tl+19,"="));
const iterator = createlocGenFiboGenerator();
for(var k=0 ; k<l ; k++){
/**/
disp(
"Pour k=="+k+".",
"Notez la persistance des variables locales",
"dans le Générateur.",3);
const t=iterator.next().value;
console.dir(k+1);
//
//
//
//
Le comptage vient du nombre renvoyé par
createlocGenFiboGenerator() via le yield,
et nous utilisons ce nombre comme
indice de la liste de nos maladies.
//
//
//
//
C'est une autre façon
les variables locales
des variables locales
englobante retournant
de jongler avec
statiques, en plus
d'une fonction
fonction imbriquée.
const i=parseInt(t);
console.dir(t[1]);
console.dir(t[0] +".
"+ar[k] + "***");
console.dir('\n'.padEnd(34,"#")+"\n\n");
}
</script>
Exécution :
- 48 / 99 -
jeudi, 4. avril 2019 (10:46 )
13:15:22,813
13:15:22,818
13:15:22,818
13:15:22,819
JavaScript Tome-II
***** Les 6 maladies enregistrées *****
***************************************
DANS NOTRE ***** DBL FIBONACCI ********
=======================================
13:15:22,820
13:15:22,820
13:15:22,821
13:15:22,821
13:15:22,821
13:15:22,821
Pour k==0.
test.html:12:9
Notez la persistance des variables locales
dans le Générateur.
test.html:14:9
0 1 undefined
test.html:3:13
0 1 1= 0+1
test.html:5:7
0 -> 1 , 1 -> 1
test.html:8:7
13:15:22,868
13:15:22,875
13:15:22,876
1
instant 1542197722823
2. 2229. Xérophtalmie***
test.html:83:4
test.html:98:4
test.html:99:4
13:15:22,876 #################################
test.html:101:4
13:15:22,876
13:15:22,876
13:15:22,876
13:15:22,877
13:15:22,877
13:15:22,877
Pour k==1.
test.html:12:9
test.html:14:9
1 1 1
test.html:3:13
1 1 2= 1+1
test.html:5:7
1 -> 1 , 1 -> 2
test.html:8:7
13:15:22,877
13:15:22,877
13:15:22,877
2
instant 1542197722878
4. 2409. Entropion***
test.html:83:4
test.html:98:4
test.html:99:4
13:15:22,877 #################################
test.html:101:4
13:15:22,878
13:15:22,878
13:15:22,881
13:15:22,881
13:15:22,890
13:15:22,890
Pour k==2.
test.html:12:9
Notezla persistance des variables locales
test.html:14:9
1 2 2
test.html:3:13
1 2 3= 1+2
test.html:5:7
1 -> 2 , 2 -> 3
test.html:8:7
13:15:22,890
13:15:22,891
13:15:22,891
3
instant 1542197722891
6. 2001. Rétinoblastome***
test.html:83:4
test.html:98:4
test.html:99:4
13:15:22,891 #################################
13:15:22,891
13:15:22,891
13:15:22,891
13:15:22,892
test.html:101:4
Pour k==3.
test.html:12:9
test.html:14:9
2 3 3
test.html:3:13
- 49 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
13:15:22,892
13:15:22,892
2 3 5= 2+3
2 -> 3 , 3 -> 5
test.html:5:7
test.html:8:7
13:15:22,893
13:15:22,893
13:15:22,894
4
instant 1542197722893
10. 2259. Hyperphorie***
test.html:83:4
test.html:98:4
test.html:99:4
13:15:22,894 #################################
test.html:101:4
13:15:22,895
13:15:22,895
13:15:22,895
13:15:22,896
13:15:22,896
13:15:22,896
Pour k==4.
test.html:12:9
test.html:14:9
3 5 5
test.html:3:13
3 5 8= 3+5
test.html:5:7
3 -> 5 , 5 -> 8
test.html:8:7
13:15:22,896
13:15:22,896
13:15:22,899
5
instant 1542197722896
16. 2903. Épiphora***
test.html:83:4
test.html:98:4
test.html:99:4
13:15:22,900 #################################
test.html:101:4
13:15:22,900
13:15:22,900
13:15:22,900
13:15:22,900
13:15:22,900
13:15:22,901
Pour k==5.
test.html:12:9
Notezla persistance des variables locales
test.html:14:9
5 8 8
test.html:3:13
5 8 13= 5+8
test.html:5:7
5 -> 8 , 8 -> 13
test.html:8:7
13:15:22,901
13:15:22,901
13:15:22,901
6
instant 1542197722901
26. 2117. Gérontoxon***
test.html:83:4
test.html:98:4
test.html:99:4
13:15:22,901 #################################
test.html:101:4
CHAPITRE 3 : SYNTAXE DES INSTRUCTIONS dans JavaScript
En JS standard, une variable peut ou ne pas être déclarée (avec let,
const ou var) avant sa première utilisation, mais en mode strict ("use
strict;" dans une chaîne exactement comme ici) la déclaration est exigée,
mais pas nécessairement avant la première utilisation, mais n’importe où
dans la portée, même en mode strict. Es8 autorise une virgule à la fin de
la liste de paramètres « function fct(var1 , var2 , var3 , ) », arguments
- 50 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
« fct (9, "", {} , ){} » , littéraux de tableau « [10 , «txt» , {} , ] » et littéraux d’objet « {x: 1 , } ».
I. Une variable [peut prendre ou changer de valeur n’importe quand et
n’importe où dans sa portée.
1. La visibilité d’une variable déclarée avec le token « var » est
tout le fichier si déclarée dans l’espace global, ou toute la
fonction (et seulement cette fonction) si déclarée dans le bloc
de la fonction. Sa visibilité n’est pas limitée dans tout autre
bloc que celui d’une fonction (boucles…).
2. La visibilité d’une variable déclarée avec le token « let » est
seulement le BLOC le plus profond dans lequel elle a été déclarée et les sous-blocs de celui-ci.
II. Une constante ou "immutable variable" [déclarée avec le token
« const »] DOIT être déclarée avant sa première utilisation et ne peut
changer de valeur une fois déclarée, et donc elle doit obligatoirement
être initialisée au moment de sa déclaration. Seul la variable constante ne peut recevoir une nouvelle valeur, le contenu peut bien changer (par exemple quand il s’agit d’un objet).
1. La portée d’une constante (comme celle d’une variable let)
est seulement le BLOC le plus profond dans lequel elle a été
déclarée et les sous-blocs de celui-ci.
On ne peut naturellement pas utiliser const comme spécificateur de type
du compteur d’une boucle (for, while, do…while).
Dans le JavaScript standard une variable peut, outre changer de valeur,
être redéclarée autant de fois qu’on le veut.
En mode strict aucune variable « let » ou constante ne peut être redéclarée.
let r;
let r;
- 51 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
// SyntaxError: redeclaration of let r
// test.html:3:4
// note: Previously declared at line 2, column 4
// test.html:2:4
for (var l=0; l<10; l++){}
console.log(l);
for (let k=0; k<10; k++){}
console.log(k);
// ReferenceError: k is not defined
// test.html:13:2
for (const n=0; n<10; n++){}
// TypeError: invalid assignment to const `n'
// test.html:17:23
for (let m=0; m<10; m++){const c=5}
console.log(c);
// ReferenceError: c is not defined
// test.html:23:3
</script>
En mode non strict :
date = new Date();
console.log(date.toLocaleDateString()); //
27/01/2018
console.log(date.toLocaleString());
//
27/01/2018 à 01:40:32
console.log(date.toUTCString()) ;//
Sat, 27 Jan 2018
00:40:32 GMT
console.log(date.toGMTString()); //
Sat, 27 Jan 2018
00:40:32 GMT
</script>
En mode strict :
- 52 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
"use strict";
notreVar = new NotreVar();
notreVar = function(){};
notreVar = _ => instruction_unique;
notreVar = _ => {instructions multiples};
notreVar = (function(){return Math.PI})();
notreVar = !function(){return Math.E};
console.log(notreVar);
/* var notreVar; */
</script>
ReferenceError: assignment to undeclared variable date
test.html:3:10
[FIREFOX]
Uncaught ReferenceError: date is not defined
at test.html:3
[YANDEX]
Utilisation de variable AVANT sa déclaration :
"use strict";
notreVar = new NotreVar();
notreVar = function(){};
notreVar = _ => {};
notreVar = (function(){return Math.PI})();
notreVar = !function(){return Math.E};
console.log(notreVar); // false
test.html:7:5
var notreVar;
</script>
1. Dans JS l’indentation (comme souvent le retour à la ligne et certains
espaces blancs) n’est pas obligatoire, mais utile pour la révision (lisibilité) du code.
2. Deux instructions sur une même ligne DOIVENT être séparées par un
point-virgule (semicolons), mais les instructions en fin de ligne ne
sont pas tenues de se terminer par le point-virgule (à cause de
l’Automatic Semicolon Insertion =ASI) vs au langage C, mais il est
préférable de les placer pour vous signaler la fin d’une instruction, un
- 53 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
point-virgule superflu ne dérange pas (instruction vide).
En effet, JavaScript ou plutôt le moteur du Browser insère automatiquement beaucoup de choses qu’on omet, par exemple des balises indispensables. Prenons par exemple ce code qui n’a que la balise
« script ». JavaScript ajoute automatiquement les balises <html>,
<head>, et <body> :
<script type="text/javascript" name="dias">
</script>
- 54 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
3. La virgule sert à chaîner des instructions (comme si faisant partie d’un
même bloc). Notez les virgules en fin de lignes dans le code qui suit.
Les blocs sont préférables quand c’est possible.
"use strict";
var v;
for(
var k=0, n=parseInt("10.25 illustr parseInt") ; k<=n ;)
v = Math.pow(k,k)
,
console.log("k=", k.toString().padStart(2," ")+
". |\nMath.pow(k,k).toPrecision(10) = "+
v.toPrecision(10)+" = "+
`\n(k**k).toExponential(10) ${" ".padStart(4," ")} =`+
(k**k).toExponential(10))
,
k++ ;
</script>
k= 0. | Math.pow(k,k).toPrecision(10) = 1.000000000 =
(k**k).toExponential(10) =1.0000000000e+0
- 55 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
k= 8. | Math.pow(k,k).toPrecision(10)
(k**k).toExponential(10)
k= 9. | Math.pow(k,k).toPrecision(10)
(k**k).toExponential(10)
= 16777216.00 =
=1.6777216000e+7
= 387420489.0 =
=3.8742048900e+8
k= 10. | Math.pow(k,k).toPrecision(10) = 1.000000000e+10 =
Note :
Notez l’absence d’ « accolades » pour la boucle « for », juste pour illustrer
le « chaînage d’instructions avec l’opérateur virgule ». Mais pour faciliter
la lecture et en prévision d’ajout d’autres instructions dans votre code,
toutes les instructions des boucles (for, for...in, for each, while, do...while).
Mais avec les fonctions fléchées (expression de fonction fléchée =arrow
function =fat arrow) les instructions devraient être contenues dans une paire
d’accolades (curly braces) même quand c’est une instruction unique, ça
facilite le débogage et l’ajout ultérieur de nouvelles instructions.
const fct = (a) => {cl(a) ; return a*a;}
cl(fct(5));
</script>
Exécution :
5
25
test.html:3:25
test.html:5:5
La virgule de chaînage ne marche pas avec les instructions multiples d’une
fonction fléchée. Mais pour l’aisance de lecture, s’il n’y a qu’une seule
instruction dans la fonction fléchée, mieux vaut ne pas utiliser d’accolades.
Et en particulier quand tout ce que fait la fonction est un renvoi de valeur
- 56 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
particulièrement comme fonction callback inline, il vaut mieux dans ce cas
ne pas utiliser les accolades et même ne pas utiliser le mot-clé « return ».
const fct = (a) => cl(a) , return a*a;
cl(fct(5));
</script>
Firefox 65.0
Yandex Version 19.1.1.879 beta
La règle avec les fonctions fléchées c’est celle-ci :
<SCRIPT> "use strict";
// I. Quand il y a seulement une expression, elle
// constitue la valeur implicite de retour.
let fct = _ => Math.random();
console.log(fct()); // 0.20145337031422184
// II. return n'est pas toléré en dehors d'accolades.
// let fct2 = _ => return Math.random();
// Uncaught SyntaxError: Unexpected token return
// III. Quand il y a des accolades, elles renferment
// des instructions précises. La valeur de retour
// doit être explicitée avec un return explicite.
let fct3 = _ => { Math.random(); }
console.log(fct3()); // undefined
// IV. Avec les accolades, la valeur de retour
- 57 / 99 jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
// doit être explicitée avec un return explicite.
let fct4 = _ => { return Math.random(); }
console.log(fct4()); // 0.8308392368481337
</SCRIPT>
La virgule de chaînage peut aussi être utilisée dans les différentes parties
d’une boucle « for ». Dans l’exemple qui suit, notez la virgule de chaînage entre « k = 0 » et « a.toLocaleSt... »
<script>
var a=new Date(9999,12,31)
for(k=0 , l=a.toLocaleString().length ; k < 10 ; k++) {
console.log(k*l)
}
</script>
Exécution :
0
22
44
66
88
110 132
154
176
198
La virgule de chaînage peut aussi être utilisée dans
l’instruction de test conditionnel « ? : »
<script>
const cl=console.log;
var a=Math.round(Math.random()*10) ,
b=Math.ceil(Math.log(a)) ,
c=0,d=0,e=0;
v = a<=7
?
a*a + b*b + 2*a*b
:
- 58 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
c = Math.pow(a,2) , d=b*b , e=2*a*b ;
cl(
` a=${a} _ b=${b} \n v=${v} \n`+
` c=${c} _ d=${d} _ e=${e}`
)
</script>
Exécutions :
1.
Avec « a > 7 » :
La condition « a <= 7 ? » n’est pas remplie (a==9, > 7), l’expression
avant le double-point n’est pas exécutée, toute la chaîne d’expressions
après ce « : » est exécutée. v prend la valeur de la première expression
dans la chaîne d’instructions après le « : », les deux instructions chaînées
(¿) sont aussi exécutées.
2.
Avec « a == 7 , <= 7 » :
La condition « a<=7 ? » est remplie (a==7, inf ou == 7), l’expression
avant le double-point est exécutée, Aucune expression dans le chaînage
après ce double-point ne devrait être exécutée, mais seule la première
expression est ignorée (v a pris la valeur de l’expression « a^2 + b^2 +
2*a*b » d’avant le double-point), « c = Math.pow(a,2) » n’a pas été
exécutée (c a gardé sa valeur initiale = valeur d’initialisation), mais les
deux autres qui lui sont chaînées « d=b*b » et « e=2*a*b » ont été évaluées (exécutées).
Notez que
- 59 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
d=b*b , e=2*a*b ;
sont toujours exécutées (que la condition soit remplie ou pas), parce
qu’elles sont considérées comme ne faisant pas partie de la définition de la
variable « v », mais comme suite de définitions de variables (en mode strict
ou pas), comme vous pouvez le voir ci-dessous en mettant un « let » devant
la définition de la variable « v » :
<script>
const cl=console.log;
var a=Math.round(Math.random()*10) ,
b=Math.ceil(Math.log(a)) ,
c=0,d=0,e=0;
let v = a<=7
?
a*a + b*b + 2*a*b
:
c = Math.pow(a,2) , d=b*b , e=2*a*b ;
cl(
` a=${a} _ b=${b} \n v=${v} \n`+
` c=${c} _ d=${d} _ e=${e}`
)
</script>
Boucle « while » :
function suppress(arr, val) {
var i;
while ((i = arr.indexOf(val)) != -1) {
arr.splice(i, 1);
}
return arr;
}
- 60 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
console.log(suppress(
[ "Louis", "Morena", "Loui", "Keriyza", "Louis" ]
, "Louis" )
);
</script>
// Array ["Morena", "Loui", "Keriyza" ]
//
(2) ["Morena", "Loui", "Keriyza" ]
{FIREFOX}
{YANDEX}
On peut facilement faire la même chose avec la méthode « filter() »
"use strict";
var suppress = (from, tag) =>
from.filter(function(el){return el !== tag})
console.log(
suppress(
["Louis", "Morena", "Keriyza",
"Louis", "Keriyza", "Louis"], "Louis"));
var extract = (from, tag) =>
from.filter(function(el){return el === tag});
console.log(
extract(
["Louis", "Morena", "Keriyza",
"Louis", "Keriyza", "Louis"], "Louis"));
</script>
// Array [ "Morena", "Keriyza", "Keriyza" ]
// Array [ "Louis", "Louis", "Louis" ]
Méthodes « String . padStart ( ) » et « String . padEnd ( ) » de Rembourrage avant/après :
Pour rembourrer une chaîne avec un caractère ou une autre chaîne donnée
(par défaut l’espace) pour faire une taille totale déterminée :
- 61 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
"use strict";
console.log('123'.padStart(16,"0"));
// Padding avant
// 0000000000000123
console.log('abc'.padEnd(16,"DIAS"));
// Padding après
// abcDIASDIASDIASD
</script>
Méthodes « Object . entries ( ) » et « Object . values ( ) » permettent de
retourner un objet de paires « propriété / valeur » :
const data = {
name: 'Pet', age: 29,
Sname: 'Kiw', High: 172
};
//tableau des paires de propriétés enumerable
// [key, value] d'un objet
console.log(Object.entries(data));
/* (4)
[Array(2), Array(2), Array(2), Array(2)]
0: (2) ["name", "Pet"]
1: (2) ["age", 29]
2: (2) ["Sname", "Kiw"]
3: (2) ["High", 172]
length: 4
__proto__: Array(0)
*/
// tableau des propres valeurs de
// propriété énumérables d'un objet
- 62 / 99 -
jeudi, 4. avril 2019 (10:46 )
console.log(Object.values(data));
// (4) ["Pet", 29, "Kiw", 172]
</script>
JavaScript Tome-II
Un autre exemple d’utilisation des « Object.keys » et « Object.values » :
const oArg = [
{"Dadet":["Homme","Kinois"]},
{"Pierrette":["Femme","Alien","Umo","ExtraGalactic"]},
{"Jean":["Homme","Luozien","Kinoinisé"]}
];
console.log("Object.keys(oArg)");
console.log(Object.keys(oArg));
console.log("");
console.log("Object.values(oArg)");
console.log(Object.values(oArg));
console.log("");
for(let k=0,l=oArg.length ; k<l ; k++ ){
console.log("*** [KEYS] *** Object.keys(oArg[k])");
console.log(Object.keys(oArg[k]));
console.log("+++ [VALUES] *** Object.values(oArg[k])");
console.log(Object.values(oArg[k]));
console.log("");
}
for(let k=0,l=oArg.length ; k<l ; k++ ){
let vl = Object.values(oArg)[k];
console.log(Object.keys(vl));
console.log( Object.values(vl));
- 63 / 99 -
jeudi, 4. avril 2019 (10:46 )
}
</script>
JavaScript Tome-II
Exécution :
12:39:53,259
Object.keys(oArg) ***
test.html:8:3
12:39:53,260
Array(3) [ "0", "1", "2" ]
0: "0"
1: "1"
2: "2"
length: 3
__proto__: Array(0)
test.html:9:3
12:39:53,261
Object.values(oArg) +++
test.html:13:3
12:39:53,262
Array(3) [ {…}, {…}, {…} ]
0: {Dadet: Array(2)}
1: {Pierrette: Array(4)}
2: {Jean: Array(3)}
length: 3
__proto__: Array(0)
test.html:14:3
12:39:53,265
*** [KEYS] *** Object.keys(oArg[k])
test.html:20:6
12:39:53,265
Array [ "Dadet" ]
0: "Dadet"
length: 1
__proto__: Array(0)
test.html:21:6
- 64 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
12:39:53,266
+++ [VALUES] *** Object.values(oArg[k])
test.html:23:6
12:39:53,266
Array [ (2) […] ]
[Array(2)]
0: (2) ["Homme", "Kinois"]
length: 1
__proto__: Array(0)
test.html:24:6
12:39:53,268
test.html:20:6
12:39:53,268
Array [ "Pierrette" ]
0: "Pierrette"
length: 1
__proto__: Array(0)
test.html:21:6
12:39:53,268
test.html:23:6
12:39:53,269
Array [ (4) […] ]
[Array(4)]
0: (4) ["Femme", "Alien", "Umo", "ExtraGalactic"]
length: 1
__proto__: Array(0)
test.html:24:6
12:39:53,270
- 65 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
test.html:20:6
12:39:53,270
Array [ "Jean" ]
0: "Jean"
length: 1
__proto__: Array(0)
test.html:21:6
12:39:53,270
test.html:23:6
12:39:53,271
Array [ (3) […] ]
[Array(3)]
0: (3) ["Homme", "Luozien", "Kinoinisé"]
length: 1
__proto__: Array(0)
test.html:24:6
13:34:27,116
Array [ "Dadet" ]
["Dadet"]0: "Dadet"
length: 1
__proto__: Array(0)
test.html:34:6
13:34:27,116
Array [ (2) […] ]
[Array(2)]
0: (2) ["Homme", "Kinois"]
length: 1
__proto__: Array(0)
test.html:35:6
- 66 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
13:34:27,117
Array [ "Pierrette" ]
0: "Pierrette"
length: 1
__proto__: Array(0)
test.html:34:6
13:34:27,117
Array [ (4) […] ]
0: (4) ["Femme", "Alien", "Umo", "ExtraGalactic"]
length: 1
__proto__: Array(0)
test.html:35:6
13:34:27,118
Array [ "Jean" ]
0: "Jean"
length: 1
__proto__: Array(0)
test.html:34:6
13:34:27,118
Array [ (3) […] ]
0: (3) ["Homme", "Luozien", "Kinoinisé"]
length: 1
__proto__: Array(0)
test.html:35:6
Plusieurs valeurs de retour d’une même fonction :
Une fonction JS ne peut retourner qu’une seule valeur à la fois. Pour en
retourner plusieurs, placez-les dans une structure (array ou objet) :
Retour multiple dans un objet par « destructuration » :
- 67 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
<script type="text/javascript"> // "use strict";
function Oeil (diamAP, degMyopie) {
let refrCornée=null
return {
diamAP, degMyopie, refrCornée
}
}
let oyo = Oeil("25 mm", "-12 D");
console.log(oyo);
with(oyo){
console.log(`${diamAP}, ${degMyopie}, ${refrCornée}`);
}
</script>
Retour multiple dans une Array complexe :
function retmultiple(){
const c = new Date();
return [
{ s:c.getDay() , j:c.getDate(),
m:c.getMonth() , a:c.getFullYear() ,
hr:c.getHours() , mn:c.getMinutes() ,
sc:c.getSeconds() , ms:c.getMilliseconds()
}
,
[ c.getDay() , c.getDate(),
c.getMonth() , c.getFullYear() ,
c.getHours() , c.getMinutes() ,
c.getSeconds() , c.getMilliseconds()
]
]
}
// Renvoi dans une array (tableau), d’un objet et une array.
// Retournera dans un littéral d'objet :
// jour de la semaine [0..6], jour du mois,
- 68 / 99 -
jeudi, 4. avril 2019 (10:46 )
// le mois [0..11] et l'année longue.
JavaScript Tome-II
const j=retmultiple()
// 8 données renvoyées ds l'objet de l'array de retour.
console.log(
"Auj = [" +
j[0].s + "], le " +
j[0].j + "/" + ++j[0].m
" - "
+
j[0].hr + ":" + j[0].mn
":" + j[0].ms
)
+ "/"
+ j[0].a +
+ ":"
+ j[0].sc +
// 8 données renvoyées dans l'array de l'array de retour.
console.log("Auj = [" +
j[1][0] + "], le " +
j[1][1] + "/" + ++j[1][2] + "/" + j[1][3] +
" - " +
j[1][4] + ":" +
j[1][5] + ":" + j[1][6] +
":" + j[1][7])
</script>
16:47:52,332
16:47:52,333
Auj=[2], le 25/12/2018-16:47:52:332
Auj=[2], le 25/12/2018-16:47:52:332
test.html:27:1
test.html:37:1
CHAPITRE 4 : Définitions des termes JS selon ECMA :
https:/www.ecma-international.org/ecma-262/8.0
On y trouve notamment les définitions officielles ECMA de (et donc les
différences entre) « null », « undefined », « NAN », « Infinity » et bien
sûr le zéro (« 0 ») !...
ECMA définit le « NaN » comme suit :
The Number type has exactly 18’437’736’874’454’810’627
(that is, 264 - 253 + 3) values, representing the double-precision
64-bit format IEEE 754-2008 values as specified in the IEEE
- 69 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Standard for Binary Floating-Point Arithmetic, except that the
9’007’199’254’740’990 (that is, 253 - 2) distinct “Not-aNumber” values of the IEEE Standard are represented in ECMAScript as a single special NaN value.
(Note that the NaN value is produced by the program expression
NaN.) In some implementations, external code might be able to
detect a difference between various Not-a-Number values, but
such behaviour is implementation-dependent; to ECMAScript
code, all NaN values are indistinguishable from each other.
Note :
The bit pattern that might be observed in an ArrayBuffer (see
24.1) or a SharedArrayBuffer (see 24.2) after a Number value
has been stored into it is not necessarily the same as the internal
representation of that Number value used by the ECMAScript implementation.
There are two other special values, called positive Infinity and
negative Infinity. For brevity, these values are also referred to for
expository purposes by the symbols +∞ and -∞, respectively.
(Note that these two infinite Number values are produced by the
program expressions +Infinity (or simply Infinity) and Infinity.)
The other 18’437’736’874’454’810’624 (that is, 264 - 253) values
are called the finite numbers. Half of these are positive numbers
and half are negative numbers; for every finite positive Number
value there is a corresponding negative value having the same
magnitude.
Note that there is both a positive zero and a negative zero. For
- 70 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
brevity, these values are also referred to for expository purposes
by the symbols +0 and -0, respectively. (Note that these two different zero Number values are produced by the program expressions +0 (or simply 0) and -0.)
The 18’437’736’874’454’810’622 (that is, 264 - 253 - 2) finite
nonzero values are of two kinds:
18’428’729’675’200’069’632 (that is, 264 - 254) of them are
normalized, having the form
s × m × 2e
where s is +1 or -1, m is a positive integer less than 253 but not
less than 252, and e is an integer ranging from -1074 to 971, inclusive.
The remaining 9’007’199’254’740’990 (that is, 253 - 2) values
are denormalized, having the form
s × m × 2e
where s is +1 or -1, m is a positive integer less than 252, and e is 1074.
Note that all the positive and negative integers whose magnitude is
no greater than 253 are representable in the Number type (indeed,
the integer 0 has two representations, +0 and -0).
A finite number has an odd significand if it is nonzero and the integer m used to express it (in one of the two forms shown above)
is odd. Otherwise, it has an even significand.
In this specification, the phrase “the Number value for x” where x
represents an exact real mathematical quantity (which might
- 71 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
even be an irrational number such as π) means a Number value
chosen in the following manner. Consider the set of all finite values of the Number type, with -0 removed and with two additional
values added to it that are not representable in the Number type,
namely 21024 (which is +1 × 253 × 2971) and -21024 (which is -1 × 253
× 2971). Choose the member of this set that is closest in value to x.
If two values of the set are equally close, then the one with an
even significand is chosen; for this purpose, the two extra values
21024 and -21024 are considered to have even significands. Finally, if
21024 was chosen, replace it with +∞; if -21024 was chosen, replace
it with -∞; if +0 was chosen, replace it with -0 if and only if x is
less than zero; any other chosen value is used unchanged. The
result is the Number value for x. (This procedure corresponds exactly to the behaviour of the IEEE 754-2008 “round to nearest,
ties to even” mode.)
Some ECMAScript operators deal only with integers in specific
ranges such as -231 through 231 - 1, inclusive, or in the range 0
through 216 - 1, inclusive. These operators accept any value of the
Number type but first convert each such value to an integer value
in the expected range. See the descriptions of the numeric conversion operations in 7.1.
<script>
console.log("isNaN(NaN) ?"
, isNaN(NaN));
console.log('isNaN("texte") ?' , isNaN("texte"));
console.log("isNaN('texte') ?" , isNaN("texte"));
console.log("isNaN('') ?"
, isNaN(""));
console.log("isNaN(0) ?"
, isNaN(0));
console.log("isNaN(-0) ?"
, isNaN(-0));
console.log("isNaN(Number.POSITIVE_INFINITY) ?",
isNaN(Number.isNaNPOSITIVE_INFINITY));
console.log("isNaN(Number.NEGATIVE_INFINITY) ?",
isNaN(Number.isNaNNEGATIVE_INFINITY));
console.log("isNaN(3247) ?"
, isNaN(3247));
console.log("isNaN(-34.68) ?" , isNaN(-34.68));
console.log("isNaN(false) ?"
, isNaN(false));
</script>
- 72 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Il n’y a pas une valeur unique représentant le NAN.
Donnons un exemple simple :
Si un nombre N peut être représenté par une mantisse (N, disons
de 4 chiffres) et un exponent (E, disons de 8 chiffres), de sorte que
N = M x 2Ê, comme ceci :
N = M.E,
et que
pour N1, M1 = 9d (1001b) et E1 = 54d (0011'0110b)
=> N1 = 162'129'586'585'337'856d
et
pour N2, M2 = 9d (1001b) et E2 = 55d (0011'0111b)
=> N2 = 324'259'173'170'675'712
- 73 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Vous voyez que entre N1 et N2 il y a beaucoup d'autres nombres
(au moins 162'129'586'585'337'856 si on se limite à notre précision ici) qu'on ne saurait pas représenter avec la mantisse 9.
Bref, entre deux nombres successifs ordonnés représentables
dans les limites des tailles de stockage de la Mantisse et de
l’Exponent, il existe une infinité de NAN. Ceci, c’est sans compter
les véritables « Non Nombres ».
TOUS LES NOMBRES QU'ON NE PEUT PAS REPRÉSENTER AVEC
« TOUTES LES COMBINAISONS MANTISSE-EXPONENT { MANTISSES OBTENSIBLES DANS LA GAMME DÉTERMINÉE PAR LA
TAILLE DE [LE NOMBRE DE BITS DANS] LA MANTISSE, ET TOUS
LES EXPOSENTS [DE 2] QU'AUTORISE LA GAMME DES EXPOSENTS } » SONT DES NAN.
4.3 TERMS AND DEFINITIONS :
4.3.1 type : set of data values as defined in clause of this specification
4.3.2 primitive value : member of one of the types Undefined, Null, Boolean, Number, Symbol, or String as defined in clause. A primitive value is a datum that is represented directly at the lowest level of the language implementation.
4.3.3 object : member of the type Object. An object is a collection of properties and
has a single prototype object. The prototype may be the null value.
4.3.4 constructor : function object that creates and initializes objects. The value of a
constructor's prototype property is a prototype object that is used to implement inheritance and shared properties.
4.3.5 prototype : object that provides shared properties for other objects
When a constructor creates an object, that object implicitly references the constructor's
prototype property for the purpose of resolving property references. The constructor's
prototype property can be referenced by the program expression constructor.prototype,
and properties added to an object's prototype are shared, through inheritance, by all
objects sharing the prototype. Alternatively, a new object may be created with an explicitly specified prototype by using the Object.create built-in function.
4.3.6 ordinary object : object that has the default behaviour for the essential internal
methods that must be supported by all objects
4.3.7 exotic object : object that does not have the default behaviour for one or more
- 74 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
of the essential internal methods.
Any object that is not an ordinary object is an exotic object.
4.3.8 standard object : object whose semantics are defined by this specification
4.3.9 built-in object : object specified and supplied by an ECMAScript implementation. Standard built-in objects are defined in this specification. An ECMAScript implementation may specify and supply additional kinds of built-in objects. A built-in
constructor is a built-in object that is also a constructor.
4.3.10 undefined value : primitive value used when a variable has not been assigned a value
4.3.11 Undefined type : type whose sole value is the undefined value
4.3.12 null value : primitive value that represents the intentional absence of any
object value
4.3.13 Null type : type whose sole value is the null value
4.3.14 Boolean value : member of the Boolean type
There are only two Boolean values, true and false.
4.3.15 Boolean type : type consisting of the primitive values true and false
4.3.16 Boolean object : member of the Object type that is an instance of the standard built-in Boolean constructor
A Boolean object is created by using the Boolean constructor in a new expression,
supplying a Boolean value as an argument. The resulting object has an internal slot
whose value is the Boolean value. A Boolean object can be coerced to a Boolean value.
4.3.17 String value : primitive value that is a finite ordered sequence of zero or more
16-bit unsigned integer values. A String value is a member of the String type. Each
integer value in the sequence usually represents a single 16-bit unit of UTF-16 text.
However, ECMAScript does not place any restrictions or requirements on the values
except that they must be 16-bit unsigned integers.
4.3.18 String type : set of all possible String values
4.3.19 String object : member of the Object type that is an instance of the standard
built-in String constructor. A String object is created by using the String constructor in
a new expression, supplying a String value as an argument. The resulting object has an
internal slot whose value is the String value. A String object can be coerced to a String
value by calling the String constructor as a function.
4.3.20 Number value : primitive value corresponding to a double-precision 64-bit
binary format IEEE 754-2008 value. A Number value is a member of the Number type
and is a direct representation of a number.
4.3.21 Number type : set of all possible Number values including the special “Nota-Number” (NaN) value, positive infinity, and negative infinity
4.3.22 Number object : member of the Object type that is an instance of the standard built-in Number constructor
A Number object is created by using the Number constructor in a new expression, supplying a number value as an argument. The resulting object has an internal slot whose
value is the number value. A Number object can be coerced to a number value by calling the Number constructor as a function.
4.3.23 Infinity : number value that is the positive infinite number value
- 75 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
4.3.24 NaN : number value that is an IEEE 754-2008 “Not-a-Number” value
4.3.25 Symbol value : primitive value that represents a unique, non-String Object
property key
4.3.26 Symbol type : set of all possible Symbol values
4.3.27 Symbol object : member of the Object type that is an instance of the standard
built-in Symbol constructor
4.3.28 function : member of the Object type that may be invoked as a subroutine
In addition to its properties, a function contains executable code and state that determine how it behaves when invoked. A function's code may or may not be written in
ECMAScript.
4.3.29 built-in function : built-in object that is a function. Examples of built-in
functions include parseInt and Math.exp. An implementation may provide implementation-dependent built-in functions that are not described in this specification.
4.3.30 property : part of an object that associates a key (either a String value or a
Symbol value) and a value. Depending upon the form of the property the value may be
represented either directly as a data value (a primitive value, an object, or a function
object) or indirectly by a pair of accessor functions.
4.3.31 method : function that is the value of a property. When a function is called as
a method of an object, the object is passed to the function as its this value.
4.3.32 built-in method : method that is a built-in function
Standard built-in methods are defined in this specification, and an ECMAScript implementation may specify and provide other additional built-in methods.
4.3.33 attribute : internal value that defines some characteristic of a property
4.3.34 own property : property that is directly contained by its object
4.3.35 inherited property : property of an object that is not an own property but is a
property (either own or inherited) of the object's prototype.
I.
Le NaN (Not a Number) :
Quelques types de données sont très difficiles à se figurer :
1.
null : valeur que souvent vous (rarement le système) affectez explicitement à une variable pour l’initialiser à RIEN, juste pour éviter qu’elle
ait automatiquement la valeur undefined.
2.
Undefined : Valeur que prend automatiquement une variable quand
elle n’est pas explicitement initialisée (même pas avec null) lors de sa déclaration.
3.
NaN (number value that is a IEEE 754 “Not-a-Number” value) :
Il faut d’abord savoir qu’il n’y a pas un nombre particulier, précis représenVariables & Functions
- 76 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
tant le NaN. Dans IEEE 754, NaN est défini comme tout nombre à virgule
flottante dont tous les bits d’exposant (exponent bits) sont à 1 et la partie
fractionnaire (fractional part) ayant n’importe quelle valeur différente de
zéro (any non-zero value). Donc on peut bien avoir NaN !==NaN.
Mais:
« (null == undefined) == true »,
« (null === undefined) == false ».
« (undefined==true) == false »
« (undefined==false) == false ».
Mais aussi « null == 0 »
mais « (undefined == NaN) == false ».
var vnull = null;
var rvnull = 3 * vnull;
// Donne 0.
var cudf;
var rcudf = 1 * cudf;
// Donne NaN
« (NaN === NaN) == false »
et
« (NaN == NaN) == false ».
La méthode « Object . is ( ) » teste et confirme l’identité [bitwise] absolue,
c’est-à-dire que
« Object . is ( a , b ) » est identique à « (a = = = b) »,
« Object.is(true,true) == true »
« ( Object.is(true,true) == true ) == true »
« (Object.is(true,true) === true ) == true »
« Object.is(1,1) == true »
« ( Object.is(1,1) == true ) == true »
- 77 / 99 -
jeudi, 4. avril 2019 (10:46 )
« ( Object.is(1,1) === true ) == true »
JavaScript Tome-II
« Object.is(0,0) == true »
« ( Object.is(0,0) == true ) == true »
« ( Object.is(0,0) === true ) == true »
«
«
«
«
«
Object.is(true,1) == false »
( Object.is(true,1) == true ) == false »
( Object.is(true,1) === true ) == false »
( Object.is(true,1) == false ) == true »
( Object.is(true,1) === false ) == true »
« Object . is ( ) » échoue dans les deux cas suivants :
« Object . is ( NaN , NaN ) == true »
« (Object . is ( NaN , NaN ) == true ) == true »
« (Object . is ( NaN , NaN ) === true ) == true »
et
«
«
«
«
«
Object . is ( -0 , 0 ) == false »
(Object . is ( -0 , 0 ) == true ) == false »
(Object . is ( -0 , 0 ) == false ) == true »
(Object . is ( -0 , 0 ) === true ) == false »
(Object . is ( -0 , 0 ) === false ) == true »
=> Pour tester « IsNaN » :
1. Fonction « isNaN ( ) » :
isNaN(NaN) === true ;
isNaN("") == false ;
isNaN("") === false ;
isNaN("stg") === true ;
isNaN(" ") == false ;
isNaN(" ") === false ;
- 78 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
2. Méthode Number.isNaN() :
Number.isNaN(NaN) === true ;
Number.isNaN("") == false ;
Number.isNaN("") === false ;
Number.isNaN("stg") === false ;
Number.isNaN(" ") == false ;
Number.isNaN(" ") === false ;
3. typeof : Indique qu’un nombre n’est pas NaN.
typeof 0/0 (donne NaN) ;
((typeof 0/0) == NaN) == false ;
((typeof 0/0) == NaN) === false ;
typeof NaN === "number" ;
4. L’expression x != x :
<script language="JavaScript"> "use strict";
let x = 15;
console.log(x != x); // false
console.log(typeof 0/0);// NaN
console.log((0/0) != (0/0)); // true
// Mais remarquez ceci :
x=0/0;
console.log(typeof x); // number
console.log(x != x); // true
</script>
- 79 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
CHAPITRE 6 : Additon des nombres en JavaScript
Les nombres en JavaScript sont saisis, dans les champs [de saisie], en format « littéral » (« String »). Leur addition fait l’addition concatenative et
non pas l’addition arithmétique.
Voici quelques astuces pour contourner ce problème épineux et crucial.
let un="1", deux="2";
console.log(ùn + deux =`+
`${un + deux}`);
console.log(`-(-un - deux) =`+
`${-(-un - deux)}`);
console.log(`parseInt(un) + parseInt(deux) =`+
`${parseInt(un) + parseInt(deux)}`);
console.log(èval(un) + eval(deux) =`+
`${eval(un) + eval(deux)}`);
console.log(`1*un + 1*deux =`+
`${1*un + 1*deux}`);
console.log(ùn/1 + deux/1 =`+
`${un/1 + deux/1}`);
</script>
CHAPITRE 7 : Le « TypeCasting » :
1. Dans les opérations arithmétiques (outre l’addition = concaténation) les chaînes sont converties ("implied typecasting) en
nombres :
25 - "10" = 15 ; 25 * "10" = 250 ; 25 / "10" = 2.5...
- 80 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
2. Dans les opérations de concaténation (toute addition impliquant
une chaîne de caractères) ce sont les autres types qui sont convertis en chaîne de caractères.
a.
Dans l’addition d’un nombre et une string, le nombre est
coercé en string : 25 + "10" = "2510".
b.
Dans l’addittion d’un Boolean et une string, le Boolean
est coercé en string : true + "false" = "truefalse".
3. Dans l’addition d’un nombre et un Boolean, le Boolean est coercé en nombre : true + 10 = 11 ; false + 10 = 10.
4. Dans les opérations de comparaison, les string (chaînes) sont
coercées en nombres : 10 < "050" = true.
Voyez donc ceci à la console :
"88"+77 -> "8877"
88+"77" -> "8877"
"88+77" -> "88+77"
88+77 -> 165
"Somme = " + 4 + 7 -> "Somme = 47"
"Somme = "+1*4+7 -> "Somme = 47"
"Somme = "+1*(4+7) -> "Somme = 11"
"Somme = "+(4+7) -> "Somme = 11"
"Somme = "+-(-4-7) -> "Somme = 11"
"Somme = "+eval(4+7) -> "Somme = 11"
"Somme = "+eval(4)+eval(7) -> "Somme = 47"
"Somme = "+parseInt(4)+parseInt(7) -> "Somme =
47"
Et dans un code :
- 81 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
let n1=prompt("Donnez un nombre",
Math.floor(Math.random()*100));
const n2=prompt("Donnez un auttre nombre",
Math.floor(Math.random()*100));
console.log(n1+" + "+n2+" = ");
console.log(n1 + n2);
console.log(parseInt(n1) + parseInt(n2));
console.log(eval(n1) + eval(n2));
let n1e=eval(n1), n2e=eval(n2);
console.log(n1e + n2e);
let n1p=parseInt(n1), n2p=parseInt(n2);
console.log(n1p + n2p);
</script>
Vous pouvez forcer une coercion (coercion explicite) :
1. La fonction parseInt() covertit excplicitement un numérique littéral en entier,
2. La fonction parseFloat() covertit excplicitement un numérique
littéral en nombre
Le numérique littéral doit être au début de la chaîne.
var i = "1980 mille neuf cent quatre-vingt"
var f = "19.80 dix-neuf point quatre-vingt"
console.log(i) // 1980 mille neuf cent quatre-vingt
console.log(f) // 19.80 dix-neuf point quatre-vingt
console.log(parseInt(i)) // 1980
- 82 / 99 -
jeudi, 4. avril 2019 (10:46 )
console.log(parseFloat(i)) // 1980
console.log(parseInt(f)) // 19
console.log(parseFloat(f)) // 19.8
</script>
JavaScript Tome-II
CHAPITRE 8 : Math.floor() ou (x-(xmodulo1)) ?
Et les autres arrondissements.
Mini Benchmark :
const i = 2579.9752;
let v, debut, fin, c, n = 1e7;
m = i;
console.log("Math.floor(m) = Math.floor(" + m + ") = " +
Math.floor(m));
debut = new Date();
m = i;
c = n;
while (c--)
Math.floor(m);
console.log("Durée : " + (new Date() - debut) / 1000);
console.log("");
m = i;
console.log("Math.trunc(m) = Math.trunc(" + m + ") = " +
Math.trunc(m));
- 83 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
debut = new Date();
m = i;
c = n;
while (c--)
Math.trunc(m);
console.log("");
var m = i;
console.log("parseInt(m) = " + "parseInt(" + m + ") = " +
parseInt(m));
debut = new Date();
m = i;
c = n;
while (c--)
parseInt(m);
console.log("");
m = i;
console.log("(m - (m % 1)) = (" + m + " - (" + m + " % 1))
= " +
(m - (m % 1)));
debut = new Date();
m = i;
c = n;
while (c--)
(m - (m % 1));
console.log(`${"\n".repeat(5)}${"*".repeat(30)}\n\n`);
m = i;
console.log("m | 0 = " + m + " | 0 = ",
- 84 / 99 -
jeudi, 4. avril 2019 (10:46 )
m | 0);
JavaScript Tome-II
debut = new Date();
m = i;
c = n;
while (c--)
m | 0;
console.log(".!. ATTENTION .!.");
m = 3000000000.1;
console.log(m + " | 0 = ", m | 0);
(function () {
let b = null;
console.log("Parce que En DOUBLE-WORD (32 bits) :
");
console.log(m + "d = " + (b = m.toString(2)) +
"b");
console.log("10110010110100000101111000000000b
=");
console.log(
"1011'0010''1101'0000'''0101'1110''0000'0000b
= ",
m | 0 + "d");
console.log(
"Notez le bit (ou flag) du signe qui est à
1.");
}
)();
console.log("".padEnd(3, "\n"));
console.log("ES10 n'utilise pas encore le 64 bits : ");
m = new Uint8Array([3000000000.1]);
console.log("Uint8Array ([3000000000.1]) = " +
m.toString());
m = new Uint16Array([3000000000.1]);
m.toString());
m = new Uint32Array([3000000000.1]);
- 85 / 99 -
jeudi, 4. avril 2019 (10:46 )
m.toString());
JavaScript Tome-II
m = new Uint8ClampedArray([3000000000.1]);
console.log("Uint8ClampedArray([3000000000.1]) = " +
m.toString());
console.log("");
m = new Int8Array([3000000000.1]);
console.log("Int8Array ([3000000000.1]) = " +
m.toString());
m = new Int16Array([3000000000.1]);
m.toString());
m = new Int32Array([3000000000.1]);
m.toString());
console.log(`\n${"*".repeat(30)}${"\n".repeat(5)}` );
console.log("-----");
console.log("La suite ne retourne pas seulement la partie
entière");
console.log("-----");
console.log("");
m = i;
console.log("parseFloat(m) = parseFloat(" + m + ") = " +
parseFloat(m));
debut = new Date();
m = i;
c = n;
while (c--)
parseFloat(m);
console.log("");
- 86 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
m = i;
console.log("m.toFixed(0) = " + m + ".toFixed(0) = " +
m.toFixed(0));
debut = new Date();
m = i;
c = n;
while (c--)
m.toFixed(0);
console.log("");
m = i;
console.log("Math.ceil(m) = Math.ceil(" + m + ") = " +
Math.ceil(m));
debut = new Date();
m = i;
c = n;
while (c--)
Math.ceil(m);
console.log("");
m = i;
console.log("Math.round(m) = Math.round(" + m + ") = " +
Math.round(m));
debut = new Date();
m = i;
c = n;
while (c--)
Math.round(m);
console.log("");
- 87 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
m = i;
console.log("m.toPrecision(5) = " + m + ".toPrecision(5) =
" +
m.toPrecision(5));
debut = new Date();
m = i;
c = n;
while (c--)
m.toPrecision(5);
console.log("");
m = i;
console.log("m.toExponential(5) = " + m +
".toExponential(5) = " + m.toExponential(5));
debut = new Date();
m = i;
c = n;
while (c--)
m.toExponential(5);
console.log("");
m = i;
console.log("eval(m)= eval(" + m + ") = " + eval(m));
debut = new Date();
m = i;
c = n;
while (c--)
eval(m);
- 88 / 99 -
jeudi, 4. avril 2019 (10:46 )
console.log("");
JavaScript Tome-II
m = i;
console.log("Number(m) = Number("+m+") = "+Number(m));
debut = new Date();
m = i;
c = n;
while (c--)
Number(m);
console.log("");
m = i;
console.log("-(-m) = -("+-m+") = "+-(-m));
debut = new Date();
m = i;
c = n;
while (c--)
-(-m);
console.log("");
m = i;
console.log("1*m = 1*"+m+" = "+1*m);
debut = new Date();
m = i;
c = n;
while (c--)
1*m;
- 89 / 99 -
jeudi, 4. avril 2019 (10:46 )
console.log("");
JavaScript Tome-II
m = i;
console.log("m/1 = "+m+"/1 = "+ m/1);
debut = new Date();
m = i;
c = n;
while (c--)
-(-m);
</script>
Exécution du Benchmark :
Math.floor(m) = Math.floor(2579.9752) = 2579
Durée : 0.043
test.html:6:1
test.html:14:1
Math.trunc(m) = Math.trunc(2579.9752) = 2579
Durée : 0.032
test.html:21:1
test.html:29:1
parseInt(m) = parseInt(2579.9752) = 2579
Durée : 0.218
test.html:36:1
test.html:44:1
(m - (m % 1)) = (2579.9752 - (2579.9752 % 1)) = 2579
test.html:51:1
Durée : 0.034
test.html:59:1
******************************
test.html:63:1
m | 0 = 2579.9752 | 0 = 2579
test.html:67:1
Durée : 0.031
test.html:75:1
.!. ATTENTION .!.
test.html:77:1
3000000000.1 | 0 = -1294967296
test.html:79:1
Parce que En DOUBLE-WORD (32 bits) :
test.html:83:9
3000000000.1d =
10110010110100000101111000000000.000110011001100110011b
test.html:84:9
10110010110100000101111000000000b =
test.html:85:9
1011'0010''1101'0000'''0101'1110''0000'0000b = -1294967296
- 90 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
test.html:86:9
Notez le bit (ou flag) du signe qui est à 1. test.html:89:9
ES10 n'utilise pas encore le 64 bits :
Uint8Array ([3000000000.1]) = 0
Uint16Array ([3000000000.1]) = 24064
Uint32Array ([3000000000.1]) = 3000000000
Uint8ClampedArray([3000000000.1]) = 255
test.html:96:1
test.html:99:1
test.html:102:1
test.html:105:1
test.html:108:1
Int8Array ([3000000000.1]) = 0
Int16Array ([3000000000.1]) = 24064
Int32Array ([3000000000.1]) = -1294967296
test.html:114:1
test.html:117:1
test.html:120:1
******************************
test.html:122:1
La suite ne retourne pas seulement la partie entière
test.html:127:1
----test.html:128:1
parseFloat(m) = parseFloat(2579.9752) = 2579.9752
test.html:133:1
Durée : 0.842
test.html:141:1
m.toFixed(0) = 2579.9752.toFixed(0) = 2580
Durée : 1.257
test.html:148:1
test.html:156:1
Math.ceil(m) = Math.ceil(2579.9752) = 2580
Durée : 0.031
test.html:163:1
test.html:171:1
Math.round(m) = Math.round(2579.9752) = 2580
Durée : 0.031
test.html:178:1
test.html:186:1
m.toPrecision(5) = 2579.9752.toPrecision(5) = 2580.0
test.html:193:1
Durée : 1.404
test.html:201:1
m.toExponential(5) = 2579.9752.toExponential(5) = 2.57998e+3
test.html:208:1
Durée : 3.459
test.html:216:1
eval(m)= eval(2579.9752) = 2579.9752
- 91 / 99 -
test.html:223:1
jeudi, 4. avril 2019 (10:46 )
Durée : 2.735
JavaScript Tome-II
test.html:230:1
Number(m) = Number(2579.9752) = 2579.9752
Durée : 0.48
test.html:238:1
test.html:245:1
-(-m) = -(-2579.9752) = 2579.9752
Durée : 0.3
test.html:253:1
test.html:260:1
1*m = 1*2579.9752 = 2579.9752
Durée : 0.287
test.html:268:1
test.html:275:1
m/1 = 2579.9752/1 = 2579.9752
Durée : 0.295
test.html:283:1
test.html:290:1
- 92 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Puissance de la boucle « for … in » :
La boucle for … in permet de parcourir automatiquement les éléments
d’une collection itérable e.g. une Array, et de leur appliquer un même traitement spécifique.
let arr = new Uint32Array(
[83,40,12,89,78,12,10,73,78,77]
);
let t="";
for(let i in arr) t += arr[i] + " | ";
console.log(t);
</script>
16:03:15.217 test.html:6
83 | 40 | 12 | 89 | 78 | 12 | 10 | 73 | 78 | 77 |
Avec la boucle « for … in », on peut aussi dans certains cas parcourir toutes
les propriétés/attributs de certains éléments HTML/DOM comme « navigator », « window », « document » … sans manipuler d’indice :
- 93 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Précédence / Préséance des opérateurs
Table de Précédence (Préséance) des Opérateurs JS
(de la plus forte à la plus basse) :
. (dot accès champ)
++ -- - ~ ! delete new typeof void
* / %
+ (addition) - (soustraction) + (concaténation)
<< >> >>>
< <= > >= instanceof
== != === !==
&
^
|
&&
||
?:
= op= (pour +=
-=...*=
/=)
, (virgule = chaînage = évaluation multiple)
(3 + 2 * num).toString() === false
// Affiche true
!(3 + 2 * num).toString() === "") // false
Exemple illustratif de la précédence (préséance) des opérateurs :
"use strict";
var num = 10;
console.log(
5 == num / 2 && !(3 + 2 * num).toString() == false);
// Affiche true.
console.log(
5 == num / 2 && !(3 + 2 * num).toString() === "");
// Affiche false.
console.log((3 + 2 * num).toString() == false) // false
console.log(!(3 + 2 * num).toString() == false) // true
console.log((3 + 2 * num).toString() === false) // false
console.log(!(3 + 2 * num).toString() === false) // true
- 94 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
console.log((3 + 2 * num).toString() == "")
// false
console.log(!(3 + 2 * num).toString() == "") // true
console.log((3 + 2 * num).toString() === "") // false
console.log(!(3 + 2 * num).toString() === "") // false
console.log(!(3 + 2 * num))
// false
</script>
QUIZ :
Expliquez-vous le comportement (du reste très logique mais qu’on pourrait
par mégarde juger de paradoxal) de l’opérateur « OU logique » (à ne pas
confondre avec le « OU binaire/bitwise ») dans ce code.
for(let l=-2 ; l<=2 ; l++) {
for(let k=-2 ; k<=2 ; k++) {
console.log(
l+" || "+k," == ", l||k,
" *** "+
k+" || "+l," == ", k||l
);
}
console.log("");
}
</script>
Exécution :
-2
-2
-2
-2
-2
|| -2 == -2
|| -1 == -2
|| 0 == -2
|| 1 == -2
|| 2 == -2
///
///
///
///
///
-2
-1
0
1
2
||
||
||
||
||
-2
-2
-2
-2
-2
== -2
== -1
== -2
== 1
== 2
-1
-1
-1
-1
-1
|| -2 == -1
|| -1 == -1
|| 0 == -1
|| 1 == -1
|| 2 == -1
///
///
///
///
///
-2
-1
0
1
2
||
||
||
||
||
-1
-1
-1
-1
-1
== -2
== -1
== -1
== 1
== 2
0 || -2 == -2
///
-2 ||
0 == -2
- 95 / 99 -
jeudi, 4. avril 2019 (10:46 )
0 || -1 == -1
///
-1
0 || 0 == 0
///
0
0 || 1 == 1
///
1
0 || 2 == 2
///
2
||
||
||
||
0
0
0
0
== -1
== 0
== 1
== 2
JavaScript Tome-II
1
1
1
1
1
|| -2 ==
|| -1 ==
|| 0 ==
|| 1 ==
|| 2 ==
1
1
1
1
1
///
///
///
///
///
-2
-1
0
1
2
||
||
||
||
||
1
1
1
1
1
== -2
== -1
== 1
== 1
== 2
2
2
2
2
2
|| -2 ==
|| -1 ==
|| 0 ==
|| 1 ==
|| 2 ==
2
2
2
2
2
///
///
///
///
///
-2
-1
0
1
2
||
||
||
||
||
2
2
2
2
2
== -2
== -1
== 2
== 1
== 2
Cette technique de « OR_isation » est souvent utilisée pour générer des
paramètres [formels] par défaut aussi appelés paramètres [formels] implicites, mais très compromettant quand l’argument envoté (paramètre réel)
est justement « zéro (0) ».
Dans ce cas, on préfère plutôt tester le type de la valeur envoyé avec
param = (typeof param === "undefined") ? default_value : param;
Heureusement que depuis ES6 la définition des valeurs par défaut pour les
paramètres est possible (bien entendu incompatible avec les vieux browsers).
Voir paramètres par défaut (page 8).
Recommandation :
Pour tester un code HTML, DOM, JavaScript, CSS, allez sur l’IDE du
site http://jsfiddle.net/, dommage qu’il faut être online (connecté).
Kinshasa, le jeudi 4 avril 2019 (10:46:04 PM).
- 96 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
Mots-clés :
JAVASCRIPT, Programmation Internet, keys, values, parseInt, parseFloat,
toString, fonction fléchée, sloppy mode, mode strict, prototype, objet ordinaire, objet exotique, objet standard, built-in object, Scope, contexte
d’exécution, Domaine, Portée, Étendue, Visibilité, Accessibilité, durée de
vie, Es10, ECMASCRIPT 2019, LiveScript, extra-dimensionnels, entités
éthériques non-biologiques, TC39, ECMA, Kaprekar
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-de-LaCreation
- 97 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
D’autres publications pouvant aussi intéresser :
• https://www.scribd.com/document/377036251/Le-Dosage-DesMedicaments-en-Cac-Cas
• https://www.scribd.com/document/377035454/Le-Hasard-DesThermometres-Non-contact-a-Infrarouge
• https://www.scribd.com/document/376222482/Petite-IntroductionAux-Fonctions-JavaScript
• https://www.scribd.com/document/376221919/La-Foi-en-Jesus-ChristPour-Quoi-Faire
• https://www.scribd.com/document/375689778/Lacuite-visuelleangulaire
• https://www.scribd.com/document/375349851/La-variable-This
• https://www.scribd.com/document/375024162/Fonctions-Imbriqueesen-JS
• https://www.scribd.com/document/374789297/Format-Interne-DesObjets-JavaScript
• https://www.scribd.com/document/374788758/Iterations-en-JavaScript
• https://www.scribd.com/document/374738470/Le-Plus-Grand-Secretde-La-Creation
• https://www.scribd.com/document/374597969/Nouvelle-Formule-dIMC-indice-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
• 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-Visuelledu-Traitement-de-La-Malaria
• https://www.scribd.com/document/318180637/Rapport-EntreOxymetrie-Et-Type-Respiration
- 98 / 99 -
jeudi, 4. avril 2019 (10:46 )
JavaScript Tome-II
• https://www.scribd.com/document/315746265/Classification-DesMedicaments
• https://www.scribd.com/document/315745909/IncongruencesHeresies-et-Heterodoxies-de-la-Notion-de-Laboratoire
• https://www.scribd.com/document/315745725/Rapport-EntreOxymetrie-Et-Type-Respiration
- 99 / 99 -
jeudi, 4. avril 2019 (10:46 )

javascript tome ii

Transcription

Documents pareils

Tutoriel Javascript - Simplon Boulogne sur Mer

Tea House - ShowTime

Console - Bidon recyclé et Teck

la console vsmile - MetaGames-EU

Plan Villa CHARTREUX

Rapide utilisation de visualroute

Fiche atelier - flash xbox 360

Pourquoi faut-il des callback en Javascript ?

Montage photo simple avec Photofiltre

Console portable Ressemble à une tablette - 1001 jeux vidéo