Fonctionnalités et différences HTML, CSS et JavaScript (HTML)

Applies to Windows and Windows Phone

Les applications Windows Runtime utilisant la plateforme JavaScript vous permettent de créer des applications avec HTML, CSS et JavaScript. La programmation d’applications Windows Runtime en JavaScript s’apparente à l’écriture de balisage et de code pour un site Web, mais les applications Windows Runtime en JavaScript offrent des fonctionnalités supplémentaires et illustrent quelques différences relatives à l’utilisation des fonctionnalités HTML existantes. Examinons ces différences.

Prérequis

Prise en charge du code HTML

Les applications Windows Runtime en JavaScript prennent en charge la plupart des fonctionnalités HTML5, telles que les éléments canvas, SVG, video et audio. Elles prennent également en charge la plupart des fonctionnalités des feuilles de style en cascade de niveau 3 (CSS3), comme les transformations 2D, les transformations 3D, les transitions et les animations.

En général, l’écriture de code HTML pour une application Windows Runtime en JavaScript ressemble fortement à l’écriture de code HTML pour Internet Explorer 11 en mode standard. Il existe malgré tout quelques différences. Les sections suivantes décrivent les nouvelles puissantes fonctionnalités des applications Windows Runtime en JavaScript et montrent les différences de fonctionnement de certaines API HTML et DOM.

Fonctionnalités supplémentaires

Les applications Windows Runtime en JavaScript offrent de nombreuses nouvelles fonctionnalités que vous pouvez utiliser pour améliorer vos applications :

  • Prise en charge améliorée des opérations tactiles.
  • Davantage de possibilités de personnaliser l’apparence de l’interface utilisateur.

    Les applications Windows Runtime en JavaScript offrent des composants de style, appelés composants WebPart, s’ajoutant aux nombreux contrôles HTML existants et à tous les nouveaux contrôles de la bibliothèque Windows pour JavaScript. Ces composants WebPart vous donnent plus de liberté pour personnaliser l’apparence de vos contrôles. Pour plus d’informations sur l’application de styles aux contrôles, voir Démarrage rapide : application de styles aux contrôles.

  • Accès à Windows Runtime.

    Windows Runtime est un ensemble d’API développées pour les applications Windows Runtime, qui offrent notamment une fonctionnalité réseau, une meilleure analyse du code XML et un accès au système et aux périphériques. Pour obtenir la liste complète des fonctionnalités offertes par Windows Runtime, voir les Informations de référence sur Windows Runtime.

    Vous pouvez également utiliser Windows Runtime pour écrire vos propres bibliothèques personnalisées en C#, Visual Basic ou C++. Vous pouvez ensuite accéder à ces bibliothèques par l’intermédiaire de JavaScript dans votre application Windows Runtime en JavaScript.

  • Des contrôles, tels que DatePicker, TimePicker et ListView. Ces contrôles de données peuvent être hautement personnalisés et être liés à différents types de données, y compris du code XML et des services Web. Ces contrôles font partie de la Bibliothèque Windows pour JavaScript (WinJS).

    Pour en obtenir la liste complète, voir Liste des contrôles.

  • Accès à WinJS.

    WinJS est un ensemble de fichiers JavaScript et CSS qui simplifie la création des applications Windows Runtime en JavaScript. Vous pouvez l’utiliser conjointement avec HTML, CSS et Windows Runtime pour créer votre application.

Objets Windows Runtime

Windows Runtime fournit des API qui offrent un accès plus profond au système. Vous pouvez écrire vos propres objets personnalisés pour votre projet en C#, VB et C++, que vous pouvez inclure en tant que bibliothèque de code dans votre projet.

Différences

D’une manière générale, les API HTML et DOM fonctionnent comme dans Windows Internet Explorer en mode standard. Il y a toutefois quelques différences. Certaines de ces différences sont le résultat d’une exécution dans le shell Windows, qui contrôle quels types de fenêtres vous pouvez ouvrir. D’autres différences résultent du modèle de sécurité de l’application du Windows Store en JavaScript.

  • Applies to Windows

Windows : création et manipulation de fenêtres

Dans le shell Windows, l’application active occupe une seule fenêtre qui remplit la plupart de l’écran. Vous ne pouvez pas créer de nouvelles fenêtres, ou encore redimensionner ou déplacer des fenêtres existantes.

Utilisation de l’objet window

Certaines méthodes de l’objet window telles que alert, prompt, open, moveBy, moveTo, resizeBy et resizeTo ne fonctionnent pas dans les applications Windows Runtime en JavaScript. Une page qui s’exécute dans le contexte local peut utiliser window.close pour fermer l’application, mais uniquement en cas d’erreur irrécupérable. Les pages qui s’exécutent dans le contexte Web ne peuvent pas utiliser window.close.

Navigation de base

L’une des formes de navigation les plus simples et les plus couramment utilisées est le lien hypertexte. Le code ci-dessous crée un lien hypertexte permettant d’accéder à la page page2.html.


<p><a href="page2.html">Go to page 2</a></p>

Étant donné qu’il s’agit d’un lien relatif, le système présume que page2.html est une page locale qui fait partie de votre application. Le fait de cliquer sur le lien vous permet d’accéder à page2.html. Les pages locales, comme page2.html, exécutent le contexte local.

L’exemple suivant ajoute un lien vers le site Web externe www.bing.com :


<p><a href="ms-appx:///page2.html">Go to page 2</a></p>
<p><a href="http://www.bing.com">Search the web</a></p>


Lorsque vous cliquez sur le deuxième lien, quelque chose d’intéressant se produit — le lien s’ouvre dans le navigateur Web plutôt qu’à l’intérieur de votre application, comme c’était le cas pour le premier lien.

C’est pourquoi les applications Windows Runtime en JavaScript n’effectuent pas de navigation de niveau supérieur vers une page externe. En effet, elles ne peuvent afficher les pages Web externes que dans un contrôle WebView ou iframe. Pour plus d’informations, voir Comment créer des liens vers des pages Web externes. Pour plus d’informations sur les différents protocoles que vous pouvez utiliser pour établir ce lien (par exemple ms-appx:/// et ms-appx-web:///), voir Comment référencer du contenu.

Pages de contexte local et de contexte Web

Pour comprendre quelques-unes des différences entre la façon dont votre balisage et votre code se comportent dans le navigateur et dans une application Windows Runtime en JavaScript, vous devez d’abord comprendre la différence entre le contexte local et le contexte Web.

Une application Windows Runtime en JavaScript contient au moins une page HTML. Cette page, ainsi que toute autre page que vous incluez dans l’application elle-même, s’exécute généralement dans le contexte local de l’application. Lorsque vous utilisez un objet iframe pour accéder à une page distante, cette page s’exécute dans le contexte Web et a un accès limité à votre système.

Vous pouvez utiliser la section ApplicationContentUriRules du manifeste du package de l’application pour permettre à une page du contexte Web d’accéder aux périphériques de géolocalisation de votre système (si votre application a accès à cette fonctionnalité), ainsi que d’accéder au Presse-papiers.

Bien qu’elles aient accès à une plus grande partie du système que les autres pages externes, les pages du contexte Web ne bénéficient pas d’un accès aussi large que les pages du contexte local. Par exemple, une page du contexte Web ne peut pas accéder à Windows Runtime, contrairement à une page du contexte local. Pour plus d’informations sur les différences entre les contextes locaux et Web, voir Fonctionnalités et restrictions par contexte.

Modèles de navigation

Presque tous les sites Web proposent une forme de navigation, généralement sous la forme de liens hypertexte sur lesquels vous cliquez pour accéder à une autre page. Chaque page a son propre jeu de fonctions et de données JavaScript, un nouveau jeu de code HTML à afficher, des informations de style, etc. Ce modèle de navigation est appelé navigation multi-page.

Un autre modèle de navigation est la navigation sur une seule page, qui vous permet d’utiliser une seule page pour votre application et de charger d’autres données dans cette page selon vos besoins. Vous divisez toujours votre application en plusieurs fichiers, mais au lieu de passer de page en page, votre application charge d’autres documents (à l’aide des objets Page ou HtmlControl) dans la page principale. La page principale de votre application n’étant jamais déchargée, vos scripts ne le sont jamais non plus, ce qui facilite la gestion de l’activation, de l’état et des animations. Les utilisateurs qui exécutent votre application peuvent ainsi bénéficier d’un excellent confort d’utilisation, sans temps de chargement des nouvelles pages et sans affichage d’écrans vierges. Nous vous recommandons d’employer le modèle de navigation sur une seule page pour les applications du Windows Store en JavaScript.

Fonctions asynchrones

Pour fournir une expérience utilisateur réactive, de nombreuses fonctions WinJS et Windows Runtime s’exécutent de façon asynchrone. Votre application peut ainsi continuer à répondre aux interactions utilisateur tout en effectuant des opérations en arrière-plan. Au lieu de retourner directement une valeur, une fonction asynchrone retourne un élément Promise pour une valeur. Pour plus d’informations sur la programmation asynchrone, voir Programmation asynchrone en JavaScript.

Ajout dynamique de code HTML

Une page située dans le contexte local de votre application dispose d’un accès plus important au système que les autres pages Web (« pages du contexte Web »). Elle peut accéder à Windows Runtime et, selon les autorisations de l’application, éventuellement accéder au système de fichiers et à vos périphériques. Pour cette raison, il est important d’empêcher l’exécution de tout code potentiellement malveillant.

Afin de se prémunir contre les injections de scripts et aider à protéger votre système du code potentiellement malveillant, le code HTML que vous injectez dans une page du contexte local est filtré comme s’il était traité par la méthode toStaticHTML. L’injection de code HTML contenant un élément inconnu, un gestionnaire d’événements, un script ou une référence à un script, ou encore un pseudo-élément et une pseudo-classe CSS inconnus génère une exception lorsque vous tentez d’ajouter le code HTML dans le DOM de la page.

Cette restriction de sécurité s’applique aux propriétés et méthodes suivantes :

Vous pouvez contourner cette restriction de sécurité, mais n’utilisez dans ce cas que du contenu approuvé qui n’inclut aucun contenu Web distant échappant à votre contrôle. Pour contourner le filtrage HTML de sécurité, utilisez l’une des fonctions suivantes :

  • createElement

    Crée explicitement de nouveaux éléments que vous pouvez ajouter au DOM. Étant donné que vous créez chaque élément explicitement, le filtre HTML de sécurité ne leur est pas appliqué. Nous supposons que vous contrôlez complètement ce que vous ajoutez et qu’il n’y a donc aucun risque d’ajout accidentel de code malveillant.

  • MSApp.execUnsafeLocalFunction

    Désactive le filtrage HTML de sécurité pour la fonction spécifiée. Vous pouvez créer une fonction qui insère le contenu qui serait normalement bloqué et utiliser MSApp.execUnsafeLocalFunction pour exécuter cette fonction.

    
    
    var someElement = document.getElementById('someElementID');
    MSApp.execUnsafeLocalFunction(
        function() { someElement.innerHTML = '<div onclick="console.log(\"hi\");">hi</div>' }
    );
    
    
    
    
  • WinJS.Utilities.setInnerHTMLUnsafe, WinJS.Utilities.setOuterHTMLUnsafe

    Écrit le code HTML spécifié, sans utiliser le filtrage HTML de sécurité. (Ces fonctions font partie de WinJS.)

Parce qu’elles ont un accès limité au système, les pages du contexte Web ne sont pas soumises à ces restrictions : les propriétés et les fonctions telles que innerHTML et pasteHTML ne vérifient pas la présence de code potentiellement malveillant.

Événements DOM

Pour la plupart, les événements DOM fonctionnent avec les applications Windows Runtime en JavaScript comme ils le feraient pour un navigateur Web, mais il y a quand même quelques différences. Pour obtenir la liste des événements qui fonctionnent différemment, voir Liste des modifications apportées aux API HTML et DOM.

Contrôles ActiveX

Les applications Windows Runtime en JavaScript ne prennent pas en charge les contrôles ActiveX personnalisés. Si vous avez besoin d’un contrôle d’interface utilisateur, utilisez un contrôle HTML, un contrôle WinJS, ou créez votre propre contrôle WinJS. Si vous avez besoin d’effectuer une logique personnalisée, créez un objet Windows Runtime personnalisé à la place.

Codage

La totalité du code HTML, JavaScript et CSS auquel accède une application Windows Runtime en JavaScript doit être codée au format UTF-8.

Mise en cache du bytecode

Quand une application Windows Runtime en JavaScript est exécutée en dehors de l’environnement de débogage de Microsoft Visual Studio, un certain nombre d’optimisations des performances ont lieu. Optimisation importante : tous les fichiers JavaScript (fichiers avec une extension .js) inclus dans le package de l’application sont convertis en un bytecode que le moteur JavaScript peut utiliser directement. Votre application peut charger et exécuter le code contenu dans ces fichiers plus vite qu’elle ne peut charger et exécuter des fichiers non traités, comme un fichier JavaScript sur le Web. Ce bytecode et une copie du code source lui-même sont stockés dans un fichier de cache de bytecode unique avec les fichiers du package. Après la conversion complète du bytecode, la modification des fichiers sources d’origine n’a pas d’effet sur le comportement de l’application jusqu’à ce que celle-ci ait été redéployée.

Utilisation de jQuery

Vous pouvez utiliser jQuery dans votre application Windows Runtime en JavaScript, mais seulement les versions 2.0 et ultérieures. Nous vous conseillons de toujours utiliser la version la plus récente.

Rubriques associées

Liste des modifications apportées aux API HTML et DOM

 

 

Afficher:
© 2014 Microsoft