• Aucun résultat trouvé

[DOC] Formation de JavaScript pour débutant

N/A
N/A
Protected

Academic year: 2021

Partager "[DOC] Formation de JavaScript pour débutant"

Copied!
10
0
0

Texte intégral

(1)
(2)

Sommaire

1. Introduction 2. Opérateurs particuliers  new  delete  this  typeof  void

3. Les tableaux avec Array 4. Les événements de la fenêtre

 onLoad  onUnload  onResize 5. Les fenêtres  Self  parent  top  alert()  confirm()  prompt()  print()  back()  forward()  focus()  blur()  resizeTo()  stop()  open()  defaultStatus  location  name  opener 6. Conclusion

(3)

D'autres constituants

Dans ce chapitre nous allons traiter d'autres éléments à connaître qui ne sont pas classable dans un chapitre particulier. Ce sont des élément importants dans le JavaScript donc à connaître. Il traitera les tableaux que nous avons déjà fait allusion mais que implicitement et aussi d'autres opérateurs du langage . Mais ce chapitre traitera surtout sur les fenêtres, leur traitement mais aussi les événements qui s'applique dessus. Voilà la présentation de ce chapitre est faite, place au sous-chapitre maintenant !

Opérateurs particuliers :

Ces opérateurs dont je parle sont particuliers car ils sont nommés par un mots-clé JavaScript constitué de caractères. Il en existe cinq où je les développerais plus loin dans leur définition car nous les utiliserons concrètement et vous verrez mieux à quoi ils servent vraiment. Ces opérateurs sont liés à la création, destruction d'objet. Mais arrêtons de parler de ces

opérateurs, citons les :

 new, cette opérateur est lié à la création d'un objet  delete, cette opérateur est lié à la destruction d'un objets  this, cette opérateur sert à faire référence à l'objet courant  typeof, que nous verrons plus loin

 void, cette opérateur est un opérateur qui n'affecte aucun résultat

Les tableaux :

Un tableau est un type de variable particulier qui prends un indice, et grâce à ce type vous pourrez référencer plusieurs valeurs avec un seul nom de variable. Ce regroupement vous servira à réunir plusieurs éléments qui se ressemblent. Pour être plus clair, voici un exemple qui utilise un tableau :

<HTML> <HEAD>

<TITLE>Exemple n°001, L'utilisation d'un tableau</TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript"> jeuxvideo = new Array (3)

jeuxvideo[0] = "Crash Bandicoot" jeuxvideo[1] = "Half life"

jeuxvideo[2] = "V-Rally 3" notes = [12, 15, 13]

document.write("jeuxvideo[0] vaut "+jeuxvideo[0]+" et notes[0] vaut "+notes[0]+"<BR>") document.write("jeuxvideo[1] vaut "+jeuxvideo[1]+" et notes[1] vaut "+notes[1]+"<BR>") document.write("jeuxvideo[2] vaut "+jeuxvideo[2]+" et notes[2] vaut "+notes[2]+"<BR>") </SCRIPT>

</BODY> </HTML>

(4)

Dans ce script il y a deux déclarations de tableaux avec deux méthodes différentes de déclaration. Il faut d'abord savoir qu'un tableau accepte tout type de variable à l'intérieur d'un tableau. Revenons à notre exemple, le premier tableau (jeuxvideo) se déclare avec un nom de variable suivie d'un opérateur d'affectation, puis de l'opérateur new et de Array. Le chiffre qu'il y a entre les parenthèses qui suivent Array sert à dire combien d'éléments seront référencé dans votre tableau. Le tout sert donc à déclare un tableau. Vous voyez ainsi que l'opérateur new sert à créer un objet qui est ici un tableau avec le mot-clé Array. Voilà la déclaration du tableau est faite, place à l'initialisation de celui-ci . On initialise chaque élément du tableau avec le nom de ce tableau puis entre crochet juste à côté du tableau on met l'indice de cette élément, il faut faire attention car l'indice 0 représente l'élément numéro 1 du tableau puis l'indice 1 représente l'élément 2 du tableau et ainsi de suite. On initialise ainsi chaque élément du tableau avec une chaîne de caractère. Juste après on déclare le tableau d'une autre façon car ici le tableau est initialiser et déclaré en même temps ce qui signifit que dès qu'on «parle» d'un tableau dans le script et bien on donne des valeurs aux éléments de ce tableau. Cette technique se décompose de la façon suivante : on met le nom du tableau, suivie de l'opérateur d'affectation, puis on met des crochets; à l'intérieur de ceux-ci on met les valeurs de chaque élément séparé par une virgule et des guillemets si la valeur de l'élément est une chaîne de caractère. Pour utiliser les valeurs référencer dans ce tableau il suffit de mettre le nom du tableau suivie de crochets ouvrant et fermant et à l'intérieur de ceux-ci vous mettez l'indice du tableau. Voici ce qu'affiche le script précédent :

Il faut savoir savoir que les tableaux du JavaScript sont flexibles c'est-à-dire que l'on peut augmenter leur taille si on en a besoin pour cela il suffit de référencer un élément de ce tableau avec un indice plus élevé que celui de départ.

Les événements de la fenêtre :

Nous introduisons ici la notion d'événement qui est le résultat d'une action fait par l'utilisateur, par exemple si cet utilisateur clique quelque part sur l'écran, une certaine action aura lieu, un événement c'est ça ! Nous allons parler ici des événements lié au chargement de la page web, plus précisément de trois événements. Ce qu'il y a de plus dur à comprendre dans l’événement c'est où les placer dans un script et bien en général on les place dans des balises HTML approprié, nous étudierons en général un exemple à chaque événement pour bien le cerné. Enfin ne nous approfondissons pas dans les événements tout de suite attendons le chapitre approprié.

(5)

OnLoad est un événement qui sert à produire une certaine action lorsque la page a finit de

charger entièrement, comme par exemple saluer son visiteur qui est une action assez courante. Voici un exemple :

<HTML> <HEAD>

<TITLE>Exemple n°002, L'utilisation de l'événement onLoad</TITLE> <SCRIPT LANGUAGE="JavaScript">

function saluer(nom) {

alert("Bonjour et bienvenu(e) "+nom+" sur mon site internet !!!") }

monNom = "Fabien" </SCRIPT>

</HEAD>

<BODY onLoad="saluer(monNom)"> Voici la page qui est ici chargée !!! </BODY>

</HTML>

Dans cet exemple il y a une fonction qui est écrite entre les 2 balises <HEAD>, cette fonction a pour but de saluer le visiteur. Il y a également une constante déclarée avec un nom de personne. Jusque là tout est compréhensible mais après il y a un nouveau composant que vous ne connaissez pas et qui apparaît à l'intérieur de la balise <BODY>. Ce composant est l'événement dont nous avons parlé . En général les événements se fondent à l'intérieur de balises HTML. Ici on note l'événementonLoad à l'intérieur de la balise <BODY> et juste après il y a l'opérateur d'affectation puis des guillemets. A l'intérieur de celle-ci vous pouvez mettre un appel de fonction JavaScript qui est ici fait. Voici ce que donne le script ci-dessus :

onUnload, cette événement est du même style que le précédent sauf qu'il s'actionne lorsque le

(6)

OnResize, cet événement s'active lorsqu'une fenêtre est redimensionnée par l'utilisateur ou par

un script.

Les fenêtres :

Dans cette section nous allons étudier la gestion des fenêtres, il faut entendre qu'il y a «différentes» fenêtres : la fenêtre principale du navigateur et les «autres fenêtres» qui sont elles des fenêtres créent puis détruitent par la fenêtre principale . Il y a donc une certaine hiérarchie dans les fenêtres. Les méthodes liées aux fenêtres font parties de l'objet window qui est nécessaire sauf pour la fenêtre principale. Pour préciser une fenêtre par rapport à sa hiérarchie on peut utiliser les préfixes :

self, qui fait référence à la fenêtre actuelle.

Parent, qui fait référence à la fenêtre supérieure dans la hiérarchie juste après la fenêtre en

cours.

top, qui représente la fenêtre la plus haute dans la hiérarchie.

Maintenant nous allons voir différentes méthodes liés aux fenêtres du browser.

alert(), vous connaissez déjà cette méthode qui a pour but d'afficher une fenêtre dans le

browser ou vous devrez cliquer sur ok pour la fermer, je ne vais donc pas m'attarder dessus .

confirm(), cette méthode ressemble un peu à alert() sauf qu'au lieu de ne posséder uniquement

le bouton ok dedans il y a aussi un bouton annuler . Il peut donc être intéressant pour demander un choix à son internaute. Cette fenêtre renvoie 2 valeurs possible soit true si le bouton ok est activé ou soit false si le bouton annuler est activé. Nous verrons bientôt comment créer des actions selon certainement conditions. Voici le type de fenêtre qui s'affiche avec cette fonction :

prompt, cette méthode ressemble toujours un peu à alert() sauf qu'elle permet un dialogue

avec l'utilisateur . Elle prends deux arguments, le premier est le texte qui sera affiché un peu comme alert() et le second sera affiché dans un boîte de dialogue où l'utilisateur peut entrer des données . Cette fenêtre possède les deux mêmes boutons que la méthode confirm() . Si l'utilisateur clique sur ok alors le texte qu'il aura entrer ou celui par défaut sera renvoyé ou s'il clique sur Annuler alors la fenêtre renverra null . Voici un exemple :

(7)

<HTML> <HEAD>

<TITLE>Exemple n°003, Les fenêtres</TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

nom = prompt("Quel est votre prénom ?", "entrer ici votre nom") document.write("Bienvenu(e) sur mon site "+nom)

</SCRIPT> </BODY> </HTML>

Et voici les différentes étapes d'affichage :

print(), cette méthode sert à imprimer le contenu de la page

back(), cette méthode produit la même action que si vous cliquiez sur le bouton précédent de

votre navigateur internet

forward(), cette méthode produit la même action que si vous cliquiez sur le bouton suivant de

votre navigateur internet

focus(), cette fonction sert à afficher la fenêtre en premier plan blur(), cette fonction sert à ne plus afficher la fenêtre en premier plan

resizeTo(), cette méthode sert a redimensionner la taille d'une fenêtre. Elle prend donc 2

arguments qui sont respectivement la taille de la largeur et la taille de la hauteur, tous les deux en pixels. Voici un exemple :

(8)

<HTML> <HEAD>

<TITLE>Exemple n°004, Les fenêtres</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> resizeTo(640, 480) </SCRIPT> </BODY> </HTML>

Ce qui affiche si la résolution de l'écran est le 1152*864:

stop(), cette méthode sert à stopper le chargement de la page ce qui est le même effet que le

bouton stop du navigateur internet .

open(), cette méthode a pour but d'ouvrir une nouvelle fenêtre . Elle peut prendre beaucoup

d'arguments car on peut spécifier plein de chose dans la nouvelle fenêtre comme l'URL qui sera chargé dans cette fenêtre, sa taille, si on affiche les éléments tel que la scroll bare etc . Mais voyons les principaux arguments de ces méthodes. Je tiens à préciser que certains de ces arguments sont facultatifs. Le premier argument est une chaîne de caractères représentant l'URL qui sera chargé dans la nouvelle fenêtre. Le second argument est aussi une chaîne de caractères qui représente le nom de cette nouvelle fenêtre. Le troisième argument est en fait comme une chaîne de caractères mais à l'intérieur ce sont plusieurs arguments qui s'y trouvent avec leur mot-clé spécifiques. Ce troisième argument s'appelle une liste de paramètres. Cette liste de paramètre va servir à spécifier les caractéristiques de la fenêtre suivie ou non de valeurs, nous ne retenons que les caractéristiques principales :

height, représente la hauteur de la fenêtres en pixels. width, représente la largeur de la fenêtre en pixels.

location, est affecter d'une chaîne de caractères yes pour pouvoir afficher la barre d'URL. menubar, est affecter d'une chaîne de caractères yes pour pouvoir afficher la barre des menus. status, est affecter d'une chaîne de caractères yes pour pouvoir afficher la barre de status situé

(9)

toolbar, est affecter d'une chaîne de caractères yes pour pouvoir afficher la barre d'outils resizable, permettra à l'utilisateur de redimentionner la fenêtre s'il le désir .

Voici un exemple d'utilisation de cette méthode :

<HTML> <HEAD>

<TITLE>Exemple n°005, Les fenêtres</TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

open("", "popo", "width=500, height=500, location=yes, status=yes") </SCRIPT>

</BODY> </HTML>

(10)

Nous avons vus les méthodes des fenêtres, maintenant nous allons voir les propriétés des fenêtres, nous n'en citons que quelques unes :

defaultStatus, cette propriété doit être affecté d'une chaîne de caractères correspondant à ce

qu'il y aura d'afficher dans la barre d'état du navigateur . Voici un petit exemple :

<HTML> <HEAD>

<TITLE>Exemple n°006, Les fenêtres</TITLE> </HEAD>

<BODY>

<SCRIPT LANGUAGE="JavaScript">

status = "Bonjour et bienvenu(e) sur mon site !" </SCRIPT>

</BODY> </HTML>

Ce qui affichera dans la barre d'état du navigateur :

location, cette propriété représente l'URL courante dans la fenêtre name, chaîne de caractères représentant le nom donné à fenêtre

opener, cette propriété est une chaîne de caractères qui représente le nom de la fenêtre qui a

exécuté l'instruction open() de façon à créer la fenêtre en cours

Voilà nous avons finit ce chapitre sur les fenêtres, les tableaux, certains autres opérateurs. Vos bases en JavaScript commencent à s'agrandir et au prochain chapitre nous entamerons un chapitre assez important mais qui n'est pas forcement très compliqué à comprendre qui a pour sujet les chaînes de caractères.

Références

Documents relatifs

training phase is also proposed for a better initialization of the parameters of the arms. To choose an arm, UCB relies on a reward function calculated at the end of each restart

En guise de conclusion, nous pouvons tout d’abord mettre en avant que la distribution de rôles au sein d’un groupe offre une piste pédagogique adaptée pour favoriser

Si p'asa a été utilisé par les Kwagul pour nommer une distribution d'une grande ampleur, effectuée au cours d'un potlatch destiné à valider l'acces sion à une fonction

des théories axiomatisées qui ont toutes le même niveau de consistance, celui des mathématiques en général. Comme elles diffèrent les unes des autres, une seule

Afin de reconstituer l’ensemble du parcours et de la réflexion philologiques de Bonnier, nous nous sommes penché sur ses travaux philologiques, des documents d’archives en lien avec

By including in our dataset features about the video framerate, we may miss the in- direct dependencies of startup delay, buffering events, and video resolution on the QoE.. From

La création de la chaire occupée par Ducassé s’est faite après deux années d’un cours proposé par celui-ci ; il ne s’agissait ainsi ni d’une place préexis- tante

Soulignons toutefois dès à présent que l’étiquette de « veuves du conflit » est plus volontiers mise en avant dans le cadre des relations avec les acteurs