Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

L’OBJET JAVASCRIPT WINDOW ET SES METHODES

Introduction au BOM – L’objet Window

Dans les parties précédentes, nous avons étudié le DOM et vu comment modifier le code HTML d’une page web grâce à lui.

Le BOM, ou Browser Object Model va lui nous permettre d’accéder au navigateur, et notamment à la fenêtre ouverte actuellement en utilisant le JavaScript.

Notez cependant que, contrairement au DOM, il n’existe pas de standard officiel définissant clairement le BOM.

Cependant, comme la majorité des navigateurs actuels supportent les mêmes méthodes, propriétés et objets, on va pouvoir grosso modo effectuer les mêmes opérations quelque soit le contexte.

L’objet le plus célèbre et le plus utilisé du BOM est l’objet Window. L’objet Window va tout simplement représenter la fenêtre du navigateur.

Vous devez savoir que toutes les fonctions, variables et objets globaux appartiennent automatiquement à l’objet Window.

Cependant, l’objet Window est dit implicite. Cela signifie que nous n’aurons généralement pas besoin de le mentionner pour utiliser les méthodes (ou fonctions globales) et propriétés (ou variables globales) lui appartenant.

Par exemple, la fonction alert() est également une méthode de l’objet Window. Cependant, on ne précise jamais Window lorsqu’on utilise alert().

Regardez les deux écritures ci-dessous : elles sont strictement équivalentes mais nous préférerons la seconde, plus simple et plus claire.

L’objet window est implicite : on ne le précise généralement pas

Essayer ce code !

De même, notez que l’objet Document (appartenant au DOM) est également avant tout une propriété de Window.

Là non plus, nous ne préciserons généralement pas Window qui est une nouvelle fois implicite. Ainsi, les deux écritures ci-dessous sont à nouveau équivalentes.

L’objet document est une propriété de l’objet window

Une nouvelle fois, nous préférerons l'écriture la plus courte.

Dans la suite de cette partie, nous allons étudier quelques méthodes intéressantes de Window.

La méthode open() de Window

La méthode open() va nous servir à ouvrir un nouvel onglet ou une nouvelle fenêtre.

Open() peut prendre jusqu'à quatre arguments, tous optionnels. Utilisée sans argument, cette méthode va ouvrir un nouvel onglet vide.

En premier argument de open(), on va pouvoir spécifier une URL de destination. Cette URL peut être l’URL d’une image, page web, vidéo, etc.

Le deuxième argument de open() va nous permettre de choisir où doit s’ouvrir notre nouvelle page (onglet courant, nouvel onglet, nouvelle fenêtre, etc.). La valeur qui va nous intéresser ici est _blank qui permet d’ouvrir une nouvelle fenêtre.

On va également pouvoir se servir de ce deuxième argument pour donner un nom à notre fenêtre, ce qui pourra nous être utile pour la manipuler par la suite.

Le troisième argument va consister en une liste d’éléments nous permettant d’agir directement sur la fenêtre ouverte (largeur, hauteur, position de la fenêtre, affichage d’une barre de menu ou pas, etc.).

Finalement, le dernier argument va être un booléen spécifiant si la nouvelle fenêtre ouverte doit remplacer la fenêtre actuelle dans l’historique de navigation ou être ajoutée à celui-ci.

Voyons immédiatement un exemple d'utilisation de la méthode open().

Utilisation de la méthode open() de l’objet JavaScript window

Essayer ce code !

Dans l’exemple ci-dessus, on attache un gestionnaire d’évènement click à notre paragraphe.

Dès qu’un utilisateur va cliquer sur le paragraphe, une nouvelle fenêtre de 500px de large par 300px de haut va s’ouvrir et charger l’url pierre-giraud.com.

La méthode close() de Window

La méthode close() va elle permettre de fermer un onglet / une fenêtre. Cette méthode n'a pas besoin d'argument.

On va très souvent l’utiliser avec open(), en appliquant close() à la nouvelle fenêtre ouverte une fois certaines conditions remplies ou après l’exécution d’un certain code.

Utilisation de la méthode close() de l’objet JavaScript window

Essayer ce code !

Ici, on crée deux boutons : un premier qui commande l’ouverture d’une nouvelle fenêtre menant sur pierre-giraud.com et un second qui commande la fermeture de cette même fenêtre.

Faîtes bien attention si vous procédez de la même façon que moi à bien déclarer votre variable fenetre dans l’espace global afin d’y avoir accès à la fois dans la fonction servant à ouvrir une nouvelle fenêtre et dans celle servant à la fermer.

La méthode resizeTo() de Window

La méthode resizeTo() va nous permettre de redimensionner une fenêtre ou un onglet. Cette méthode s’utilise très simplement sur la fenêtre ou l’onglet de notre choix.

Cette méthode va prendre comme arguments la largeur et la hauteur en pixels auxquelles on souhaite redimensionner notre fenêtre ou notre onglet.

 Utilisation de la méthode resizeTo() de l’objet JavaScript window

Essayer ce code !

Dans l’exemple ci-dessus, on ajoute un bouton permettant de redimensionner la fenêtre ouverte à 300px de large par 300px de haut.

Chapitre précédent

Chapitre suivant