Vidéo: Créer un site en HTML (1/5) - "3 minutes pour coder" 2024
Par John Paul Mueller
JavaScript utilise beaucoup les objets. Savoir quels objets utiliser et quand sont des parties importantes du travail avec JavaScript. En connaissant le navigateur, le DOM (DOM) et les objets DOM HTML, vous pouvez construire une partie considérable de toute application standard (et de nombreuses applications simples). Ce sont les objets JavaScript les plus utilisés, gardez-les à portée de main.
Comment utiliser les objets du navigateur JavaScript pour gérer l'environnement d'application
Les objets du navigateur JavaScript permettent de découvrir et de modifier l'environnement d'application. En sachant où l'utilisateur est parti, où se trouve l'utilisateur et où vous pouvez emmener l'utilisateur, vous pouvez contrôler efficacement le flux de l'application. Bien sûr, il est important de connaître l'écran de taille de l'utilisateur afin de pouvoir présenter les données d'une manière qui reflète la réalité physique de l'appareil de l'utilisateur.
Le tableau suivant détaille certaines des options les plus intéressantes du navigateur JavaScript.
| Objet | Description |
|---|---|
| historique | Fournit les moyens d'examiner et de déplacer entre les URL stockées
dans l'historique du navigateur. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / obj_history. aspic. |
| location | Contient des informations sur l'URL actuelle. Cet objet
fournit également les moyens d'effectuer des tâches telles que le chargement d'une nouvelle page ou le rechargement de la page en cours. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / obj_location. aspic. |
| navigator | Contient des informations sur le navigateur actuel. Par exemple,
vous pouvez déterminer le type de navigateur et si les cookies du navigateur sont activés. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / obj_navigator. aspic. |
| screen | Spécifie les caractéristiques physiques de l'appareil utilisé pour
afficher la page, y compris la hauteur de la page, la largeur et la profondeur de couleur. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / obj_screen. aspic. |
| fenêtre | Permet d'accéder à la fenêtre du navigateur afin que vous puissiez
effectuer des tâches telles que l'affichage de boîtes de message. Lorsque vous travaillez avec des pages contenant des cadres, le navigateur crée une fenêtre pour le document HTML entier et une autre fenêtre pour chaque image.Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet sur www. w3schools. com / jsref / obj_window. aspic. |
Comment utiliser les objets DOM principaux pour gérer le contenu de l'application
Le but de toute application JavaScript est de gérer le contenu. Cela signifie ajouter, supprimer et modifier le document HTML contenant les différents éléments qui structurent et prennent en charge le contenu. Ces objets permettent d'accéder à tous les détails du document en ce qui concerne le contenu.
| Objet | Description |
|---|---|
| Attr | Permet d'accéder aux attributs individuels du document.
Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_attr. aspic. |
| document | Permet d'accéder à l'ensemble du document. Vous pouvez utiliser cet objet
pour accéder à n'importe quelle partie du document. De plus, cet objet permet d'afficher des informations directement sur la page et d'effectuer d'autres tâches liées à l'interface utilisateur. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_core_document. aspic. |
| Elément | Contient un élément de document individuel de tout type pris en charge
en XML. Cet objet fournit un accès aux attributs via l'objet Attr et les propriétés via l'objet Node. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_element. aspic. |
| Evénements | Prend en charge l'accès aux événements existants et la création de nouveaux.
Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_event. aspic. |
| HTMLElement | Contient un élément de document HTML individuel, tel qu'un paragraphe
ou un contrôle. Utilisez les objets Element et Node pour accéder aux attributs et aux propriétés des éléments . Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_all. aspic. |
| Nœud | Définit les détails d'un nœud donné, ce qui peut inclure
le document dans son ensemble, un élément dans le document et un attribut fourni dans un élément, du texte et des commentaires. Vous pouvez voir une liste complète des méthodes et propriétés associées avec cet objet sur www. w3schools. com / jsref / dom_obj_node. aspic. |
| NodeFilter | Spécifie les noeuds qui font partie d'un objet NodeIterator utilisé pour parcourir la liste des noeuds
dans un document. Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet sur // developer. mozilla. org / en-US / docs / DOM / NodeFilter. |
| NodeIterator | Fournit une méthode pour obtenir une liste de noeuds dans un document
. Traverser la liste des nœuds peut vous aider à localiser des nœuds spécifiques et interagir avec eux. Par exemple, vous pouvez trouver tous les noeuds et leur ajouter un attribut particulier . Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur // developer.mozilla. org / en-US / docs / DOM / NodeIterator. |
| NodeList | Contient une liste ordonnée de tous les nœuds dans le document
ou dans une zone particulière du document. Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet à www. w3schools. com / jsref / dom_obj_nodelist. aspic. |
| NamedNodeMap | Contient une liste non ordonnée de tous les noeuds dans le document
ou dans une zone particulière du document. Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet à www. w3schools. com / jsref / dom_obj_namednodemap. aspic. |
Utilisation des objets HTML DOM pour gérer la structure
Il est important d'organiser les informations que l'utilisateur voit à l'écran dans une présentation cohérente à l'aide de JavaScript. L'utilisateur devrait voir la structure du document HTML, mais la structure devrait supporter le contenu - il ne devrait pas attirer l'attention sur lui-même. Lorsque vous travaillez avec une page, la structure comprend tout, des tables aux contrôles utilisés pour interagir avec et gérer le contenu que l'utilisateur est le plus intéressé à voir. Les objets DOM HTML suivants vous aident à effectuer cette tâche lorsque vous travaillez avec JavaScript.
| Objet | Description |
|---|---|
| Document | Permet d'accéder à tous les éléments d'une page entière. Chaque page
chargée dans un navigateur devient un objet Document auquel vous accédez en utilisant le mot-clé document. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_document. aspic. |
| Événement | Permet l'interaction avec les événements et les gestionnaires d'événements
associés à une page. Chaque type d'élément est associé à des événements spécifiques, tels que l'événement click associé à l'objet Button . Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet à www. w3schools. com / jsref / dom_obj_event. aspic. |
| HTMLElement | Fournit une classe de base à partir de laquelle tous les éléments HTML sont dérivés.
Cette classe de base définit les propriétés et les méthodes que tous les éléments HTML fournissent. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_all. aspic. |
| Ancre | Représente un lien hypertexte HTML. Vous pouvez voir une liste complète des
méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_anchor. aspic. |
| Zone | Définit la zone dans une carte d'image HTML utilisée pour créer des régions
cliquables pour un élément graphique. Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet à www. w3schools. com / jsref / dom_obj_area. aspic. |
| Base | Spécifie l'adresse par défaut ou une cible par défaut pour tous les liens
sur une page. Vous pouvez voir une liste complète des méthodes et propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_base. aspic. |
| Corps | Représente la partie de la balise
d'une page, y compris tous les éléments contenus dans cette balise . Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet sur www.w3schools. com / jsref / dom_obj_body. aspic. |
| Bouton | Représente un bouton sur une page. Cet objet est spécifiquement
associé à l'étiquette, plutôt que la forme de l'étiquette du bouton . Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_pushbutton. aspic. |
| Formulaire | Représente un formulaire et inclut tous les éléments de ce formulaire
. Vous pouvez voir une liste complète des méthodes et des propriétés associées à cet objet sur www. w3schools. com / jsref / dom_obj_form. aspic. |
| Cadre et IFrame | Représente un cadre (la balise) ou un cadre en ligne (la balise |