Recursos e diferenças do HTML, CSS e JavaScript (HTML)

Applies to Windows and Windows Phone

A plataforma de aplicativos do Tempo de Execução do Windows em JavaScript permite que você compile aplicativos em HTML, CSS e JavaScript. Embora uma grande parte da programação de aplicativos do Tempo de Execução do Windows em JavaScript seja idêntica na criação de marcação e códigos para um site, os aplicativos do Tempo de Execução do Windows em JavaScript fornecem recursos adicionais e apresentam algumas diferenças no modo como você usa os recursos existentes de HTML. Vejamos essas diferenças.

Pré-requisitos

Suporte a HTML

Os aplicativos do Tempo de Execução do Windows em JavaScript dão suporte à maioria dos recursos HTML5, como os elementos canvas, SVG, video e audio. Eles também dão suporte à maior parte dos recursos de CSS3 (Folhas de Estilos em Cascata Nível 3), como transformações 2D, transformações 3D, transições e animações.

Em geral, escrever HTML para um aplicativo do Tempo de Execução do Windows em JavaScript se parece muito com escrever HTML para Internet Explorer 11 executado em modo de padrões. Há, porém, algumas diferenças. As próximas seções descreverão como os aplicativos do Tempo de Execução do Windows em JavaScript fornecem alguns recursos novos e poderosos, e como algumas APIs de HTML e DOM existentes funcionam de forma diferente.

Recursos adicionais

Os aplicativos do Tempo de Execução do Windows em JavaScript têm vários recursos novos que você pode usar para aprimorar seus aplicativos:

  • Suporte aprimorado ao toque.
  • Mais controle sobre a aparência da interface do usuário.

    Aplicativos do Tempo de Execução do Windows em JavaScript oferecem componentes estilizáveis adicionais, chamados partes, a muitos controles HTML existentes e a todos os novos controles da Biblioteca do Windows para JavaScript. Essas partes lhe dão maior flexibilidade sobre a aparência dos seus controles. Para saber mais sobre estilos de controles, veja Início Rápido: aplicando estilos a controles.

  • Acesse o Tempo de Execução do Windows.

    O Tempo de Execução do Windows é um conjunto de APIs desenvolvido para aplicativos do Tempo de Execução do Windows que oferece funcionalidade de rede, melhor análise de XML, acesso ao sistema e a dispositivos, e muito mais. Para obter uma lista completa do que o Tempo de Execução do Windows oferece, consulte a referência do Tempo de Execução do Windows.

    Você também pode usar o Tempo de Execução do Windows para escrever as suas próprias bibliotecas personalizadas em C#, Visual Basic ou C++. Você pode acessar essas bibliotecas por meio de JavaScript no seu aplicativo do Tempo de Execução do Windows em JavaScript.

  • Controles, como DatePicker, TimePicker e ListView, um controle de dados que podem ser bem personalizados e se conectar a diferentes tipos de dados, incluindo XML e serviços Web. Esses controles fazem parte da Biblioteca do Windows para JavaScript (WinJS).

    Para obter uma lista completa, consulte a Lista de controles.

  • Acesse a WinJS.

    WinJS é um conjunto de arquivos JavaScript e CSS que facilita a criação de aplicativos do Tempo de Execução do Windows em JavaScript. Se usa juntamente com HTML, CSS e o Tempo de Execução do Windows para criar seu aplicativo.

Objetos do Tempo de Execução do Windows

O Tempo de Execução do Windows fornece APIs que dão um acesso mais profundo ao sistema. Você pode escrever seus próprios objetos personalizados para o seu projeto em C#, VB e C++, que você inclui como uma biblioteca de código em seu projeto.

Diferenças

Em geral, as APIs de HTML e DOM funcionam como se estivessem dentro do Windows Internet Explorer em modo padrão. Mas há algumas diferenças. Algumas dessas diferenças são o resultado da execução dentro do shell do Windows, que controla quais tipos de janelas você pode abrir. Outras diferenças são o resultado do modelo de segurança do aplicativo da Windows Store em JavaScript.

  • Applies to Windows

Windows: Criando e manipulando janelas

No shell do Windows, o aplicativo ativo ocupa uma única janela que preenche a maior parte da tela. Você não pode criar novas janelas nem redimensionar ou mover janelas existentes.

Trabalhando com o objeto window

Alguns método do objeto window, como alert, prompt, open, moveBy, moveTo, resizeBy e resizeTo não funcionam nos aplicativos do Tempo de Execução do Windows em JavaScript. Uma página em execução no contexto local pode usar o window.close para fechar o aplicativo, mas deve usá-lo somente no caso de um erro irrecuperável. As páginas em execução no contexto da Web não podem usar o window.close.

Navegação básica

Uma das formas mais simples e mais utilizadas de navegação é o hiperlink. O código aqui cria um hiperlink que navega para page2.html.


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

Como é um link relativo, o sistema pressupõe que page2.html é uma página local, que faz parte do seu aplicativo. Um clique no link leva você a page2.html. Páginas locais, como page2.html, executam o contexto local.

O próximo exemplo adiciona um link para um site externo, 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>


Quando você clica no segundo link, acontece algo interessante—o link abre no navegador, e não dentro do seu aplicativo, ao contrário do primeiro link, que abriu dentro do aplicativo.

Isso acontece porque os aplicativos do Tempo de Execução do Windows em JavaScript não realizam uma navegação de nível superior para uma página externa. Eles só podem exibir páginas da Web externas em um controle WebView ou iframe. Para saber mais, veja Como se conectar páginas externas da Web. Para saber mais sobre os diferentes protocolos que você pode usar para conectar (como ms-appx:/// e ms-appx-web:///), veja Como fazer referência ao conteúdo.

Páginas locais e de contexto da Web

Para entender algumas das diferenças entre a forma como a sua marcação e o código se comportam no navegador e como se comportam em um aplicativo do Tempo de Execução do Windows em JavaScript, você precisa primeiro entender a diferença entre o contexto local e o contexto Web.

Um aplicativo do Tempo de Execução do Windows em JavaScript contém pelo menos uma página HTML. Essa página e outras páginas que você inclui no próprio aplicativo, geralmente são executadas no contexto local do aplicativo. Quando você usa um iframe para navegar até uma página remota, essa página é executada no contexto Web e tem acesso limitado ao seu sistema.

Você pode usar a seção ApplicationContentUriRules do manifesto do pacote do aplicativo para dar a uma página no contexto Web acesso aos dispositivos de localização geográfica do seu sistema (se o seu aplicativo tiver permissão para acessar essa funcionalidade), assim como acesso à área de transferência.

Apesar de terem acesso a mais do sistema do que outras páginas externas, as páginas de contexto da Web não têm tanto acesso quanto as páginas de contexto local. Por exemplo, uma página no contexto da Web não pode acessar o Windows Runtime, mas uma página no contexto local pode. Para saber mais sobre as diferenças entre contextos locais e da Web, veja Recursos e restrições por contexto.

Modelos de navegação

Quase todos os site oferecem alguma forma de navegação, geralmente sob a forma de hiperlinks que você clica para ir até uma página diferente. Cada página tem seu próprio conjunto de funções de JavaScript e de dados, um novo conjunto de HTML para exibir, informação de estilo, e assim por diante. Esse modelo de navegação é conhecido como navegação multipáginas.

Outro modelo de navegação é o de navegação de página única, no qual você usa uma única página para o aplicativo e carrega dados adicionais na página conforme necessário. Você ainda divide o aplicativo em vários arquivos, mas em vez de mudar de página para página, o aplicativo carrega outros documentos (usando os objetosPage ou HtmlControl) na página principal. Como a página principal do seu aplicativo nunca é descarregada, seus scripts nunca são descarregados, o que torna mais fácil gerenciar a ativação, o estado e animações. Quando os usuários executam o aplicativo, eles passam por uma experiência simples parecida com aplicativos que não tem de parar para carregar novas páginas e nunca exibe telas em branco. Recomendamos que os aplicativos da Windows Store em JavaScript usem o modelo de navegação de página única.

Funções assíncronas

Para oferecer uma experiência de usuário reativa, muitas funções da WinJS e do Tempo de Execução do Windows são executadas de maneira assíncrona. Dessa forma, o aplicativo pode continuar respondendo às interações com o usuário durante a execução em tela de fundo. Em vez de retornar um valor diretamente, uma função assíncrona retorna uma Promise para um valor. Para saber mais sobre programação assíncrona, veja Programação assíncrona no JavaScript.

Adicionando HTML dinamicamente

Uma página no contexto local do seu aplicativo tem mais acesso ao sistema do que outras páginas da Web (ou páginas de contexto da Web). Ela pode acessar o Windows Runtime e, dependendo das permissões do aplicativo, pode acessar o sistema de arquivos e seus dispositivos. Por isso, é importante para evitar a execução de códigos possivelmente maliciosos.

Para se proteger contra injeções de script e ajudar a proteger o seu sistema de códigos possivelmente maliciosos, o HTML que você injeta em uma página do contexto local é filtrado como se fosse processado pelo método toStaticHTML. A injeção de HTML que contém um elemento desconhecido, manipulador de eventos, script ou referência a um script ou pseudoelemento e pseudoclasse de CSS desconhecido gera uma exceção quando você tenta adicionar o código HTML ao DOM da página.

Esta restrição de segurança afeta as seguintes propriedades e métodos:

Você pode ignorar essa restrição de segurança, mas faça isso somente com conteúdo confiável que não tenha conteúdo remoto da Web fora de seu controle. Para ignorar a filtragem segura HTML, você pode usar uma destas funções:

  • createElement

    Criar explicitamente novos elementos que você pode adicionar ao DOM. Como você cria cada elemento explicitamente, a filtragem segura HTML não é aplicada a eles. Nós supomos que você esteja no controle completo do que você está adicionando e por isso não há risco de incluir acidentalmente um código malicioso.

  • MSApp.execUnsafeLocalFunction

    Desativar a filtragem segura de HTML para a função especificada. Você pode criar uma função que insere conteúdo que normalmente seria bloqueado e usar o MSApp.execUnsafeLocalFunction para executar essa função.

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

    Escreve o HTML especificado sem usar filtragem de HTML seguro. (Essas funções fazem parte da Biblioteca do Windows para JavaScript.)

Como elas têm acesso limitado ao sistema, as páginas do contexto da Web não estão sujeitas a essas restrições: propriedades e funções, pois innerHTML e pasteHTML não verificam códigos possivelmente maliciosos.

Eventos DOM

Em geral, os eventos DOM funcionam com os aplicativos do Tempo de Execução do Windows em JavaScript da mesma maneira que em um navegador da Web, mas existem algumas diferenças. Para ver uma lista de eventos que funcionam de maneira diferente, consulte Lista de mudanças de API de HTML e DOM.

Controles ActiveX

Os aplicativos do Tempo de Execução do Windows em JavaScript não dão suporte a controles ActiveX personalizados. Se você precisar de um controle de interface do usuário, use um controle HTML, um controle WinJS ou crie seu próprio controle personalizado WinJS. Se você precisar executar uma lógica personalizada, crie um objeto Windows Runtime.

Codificação

Todo HTML, JavaScript e CSS acessado por um aplicativo do Tempo de Execução do Windows em JavaScript deve ser codificado como UTF-8.

Armazenamento em cache de código de bytes

Quando um aplicativo do Tempo de Execução do Windows em JavaScript é executado fora do ambiente de depuração do Microsoft Visual Studio, ocorrem várias otimizações de desempenho. Uma otimização importante é que todos os arquivos JavaScript (arquivos com a extensão .js) incluídos no pacote de aplicativo são convertidos em código de bytes, que o JavaScript pode consumir diretamente. Seu aplicativo pode carregar e executar o código nesses arquivos mais rapidamente do que pode carregar e executar arquivos não processados, como um arquivo JavaScript na Web. Este código de bytes e uma cópia do código-fonte em si são armazenadas em um único arquivo de armazenamento em cache de código de bytes com os arquivos do pacote. Após a conclusão da conversão código de bytes, modificar os arquivos originais não afetará o comportamento do aplicativo até que ele seja reinstalado.

Usando jQuery

Você pode usar o jQuery em seu aplicativo do Tempo de Execução do Windows em JavaScript, mas somente as versões 2.0 e posteriores. Recomendamos que sempre se use a versão mais recente.

Tópicos relacionados

Lista de alterações de API de HTML e DOM

 

 

Mostrar:
© 2014 Microsoft