Comment utiliser JavaScript

JAVASCRIPT ET
ALGORITHMIQUE
N ° I I I - vendredi 31 mai 2019 (5:47:57 PM)
P o u r D é b u t e r
J.B. Dadet. DIASOLUKA Nz. Luyalu
: Comment utiliser JavaScript :
Un code JavaScript peut être utilisé 1. Directement incorporé/enfoui dans
un fichier de la famille HTML (à l’instar du PHP) ≈ code « inline », ou 2.
Dans un fichier autonome EXTERNE. Dans les deux cas le langage par dé-
faut est le JS, et accessoirement. 3. Dans la console de débogage du brow-
ser.
Dans le premier cas (code JavaScript incorporé dans le fichier
HTML qui l’utilise) le code JS n’est accessible que par le fichier dans le-
quel il est défini. La balise d’ouverture ne comportera pas l’attribut src , et
le code à exécuter est délimité par les deux balises comme dans le premier
cas, comme suit :
<script type=text/javascript>
code (directives et instructions)
</script >
La balise <script></script> délimitera le code JavaScript imbriqué.
Dans le deuxième cas (code JavaScript contenu dans un fichier
« .JS » autonome externe), le code JS est accessible à tout fichier qui fait
appel à lui (en l’incluant), n’importe où dans le monde entier, pour autant
que sa machine soit connectée (visible) à l’Internet. Le code [à inclure
dans le fichier HTML appelant] pour accéder à un fichier .JS (ou mieux le
code JS contenu dans un fichier .JS) comportant le code à exécuter est le
suivant :

J A V A S C R I P T & & A L G O R I T H M I Q U E
vendredi 31 mai 2019 - 2 / 54 - 17:47:57
<script type="text/javascript" src="chemin complet du
code_source.js"></script>
La balise <script></script> n’est plus utilisé dans le fichier source.js .
Remarquez la balise d’ouverture <script> et la balise de fermeture obliga-
toire </script> , entre les deux balises on ne met rien. Pour la syntaxe des
balises, voyez les volumes sur le HTML.
Dans le troisième cas (saisie du code javascript dans le browser de
débogage du browser) il y a deux possibilités, et dans les deux cas on
n’utilise pas la fonction « console.log » pour afficher une variable, mais on
écrit cette variable directement. Si l’exécution signale par exempe une re-
déclaration de variables « let », rafraîchissez tout bonnement la page avec
<F5>. Deux possibilités s’offrent :
o Vous saisissez chaque ligne séparément, chaque ligne terminée avec
un <RET> . Cela permet de vérifier la valité syntactique de chaque
ligne au fur et à mesure de la saisie.
o Tout le code est directement saisi à la ligne de commande de la con-
sole, chaque ligne étant terminé par un <CTRL-RET> ou <SHIFT-
RET> et non pas avec un <RET> .

J A V A S C R I P T & & A L G O R I T H M I Q U E
vendredi 31 mai 2019 - 3 / 54 - 17:47:57
Un mot sur le débogage :
Comme avec tout langage de programmation structuré (permettant les blocs
d’instructions), faites particulièrement attention avec les accolades d’ouverture
et de fermeture. L’omission / excès d’accolade non apparié est souvent signalée
seulement devant la balise de fermeture </script> ; imaginez si le programme a
de plus de 11'000 lignes comme un des miens.
Plusieurs trucs permettent de ménager ce problème :
1.
Toujours faire une ou deux copies d’un programme qui marche ou seule-
ment en cours de développement, de préférence sur des médias distincts.
2. Pour éditer un code source, travaillez sur une copie, préservez l’original.
3.
Testez le programme au fur et à mesure que vous l’éditez, surtout avant
d’aller éditer sur des zones éloignées de la position en cours.
4.
Utilisez autant de blocs <script></script> de moindre taille que possible =>
erreurs plus faciles à retrouver.
5.
Si la version finale est boguée, faites une comparaison de fichiers avec la
dernière version qui avait marché, dans un comparateur de fichier (Top
PHP Studio, UltraEdit, UltraCompare, EmEdit, MS-Word, WordPerfect,
FolderMatch, ADCSheat - Advanced Directory Comparison and Syn-
chronization, ed – ExamDiff, examxml, HexCmp – Hex Comparison,
wdiff, hws…) .
Forme correcte
<script>
{
{
alert("1er")
}
{
alert("2è")
}
}
</script>
Forme boguée
<script>
{
alert("1er")
}
{

J A V A S C R I P T & & A L G O R I T H M I Q U E
vendredi 31 mai 2019 - 4 / 54 - 17:47:57
alert("2è")
}
}
</script>
Plus d’accolades fermantes que d’ouvrantes = Syntaxe.
<script>
{
{
alert("1er")
{
alert("2è")
}
}
</script>
Plus d’accolades
ouvrantes que de
fermantes =>
‘}’ attendu
<script>
{
{
alert("1er")
}
</script>
<script>
{
{
alert("2è")
}
}
</script>
L’erreur se cantonne au premier bloc <script></script>, le
deuxième bloc s’exécute sans problème.
Objets JS :
Un
objet est simplement un type de données spécial avec une collection
de propriétés et méthodes. Les propriétés sont des attributs , les méthodes
sont des actions prédéfinies pour (ou incorporées à) l’objet.
Le type générique primitif d'objet JavaScript est l’objet Object . Tous les
objets JS (fonctions ou objets) sont des descendants de Object , héritant les
méthodes définies pour ce super-objet .

J A V A S C R I P T & & A L G O R I T H M I Q U E
vendredi 31 mai 2019 - 5 / 54 - 17:47:57
Un « objet » avec « o » minuscule est une entité nommée qui englobe des pro-
priétés et méthodes propres, ainsi qu’un prototype permettant une transmis-
sion de propriétés et méthodes héritables à ses instances (descendants). C’est
donc un type de données spécial avec une collection de propriétés et méthodes.
Les propriétés sont des attributs , les méthodes sont des actions prédéfinies
pour (ou incorporées à) l’objet
Un « Objet » avec « O » majuscule est l’ancêtre transcendant de tous les autres
objets. C’est le type générique primitif d'objet JavaScript. Tous les objets JS
(fonctions ou objets) sont des descendants de Object , héritant les méthodes dé-
finies pour ce super-objet .
Syntaxe de création : Le constructeur Object :
new Object() ;
Le constructeur d’un objet spécifie la fonction qui crée l’objet.
Voici dans l’ensemble les objets JavaScript (descendants de Object ) :
ActiveXObject (ie) , Anchor , Applet , Area , Array , Boolean ,
Button , Checkbox , Date , Dictionary (ie) , document , Drive (ie)
, Drives (C - ie) , Enumerator (ie) , Error (ie) , event , File
(ie) , Files (C - ie) , FileSystemObject (ie) , FileUpload , Folder
(ie) , Folders (C - ie) , Form , Frame , Function * , Global (ie) ,
Hidden , History , Image , Java , JavaArray , JavaClass , JavaOb-
ject , JavaPackage , Layer , Link , Location , Math , MimeType ,
navigator , netscape
1
, Number , Object , Option , Packages ,
Password , Plugin , Radio , RegExp , Regular Expression (ie) , Re-
set , screen , Select , String , Style , Submit , sun
2
, Text ,
Textarea , TextStream (ie) , VBArray (ie) , window.
* JavaScript permet de créer facilement de nouvelles fonctions :
1
« netscape » est un objet JS prédéfini de premier niveau, permettant d’accéder à n'importe quelle classe Java du
package netscape à partir de JS. Cet objet est accessible sans usage de constructeur ou appel à une méthode.
2
« sun » est un objet JS prédéfini de premier niveau, permettant d’accéder à n'importe quelle classe Java du pack-
age sun à partir de JS. Cet objet est accessible sans usage de constructeur ou appel à une méthode.