// 
//     Licensed to the Apache Software Foundation (ASF) under one
//     or more contributor license agreements.  See the NOTICE file
//     distributed with this work for additional information
//     regarding copyright ownership.  The ASF licenses this file
//     to you under the Apache License, Version 2.0 (the
//     "License"); you may not use this file except in compliance
//     with the License.  You may obtain a copy of the License at
// 
//       http://www.apache.org/licenses/LICENSE-2.0
// 
//     Unless required by applicable law or agreed to in writing,
//     software distributed under the License is distributed on an
//     "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
//     KIND, either express or implied.  See the License for the
//     specific language governing permissions and limitations
//     under the License.
//

= Conceitos Básicos sobre Criação de uma Aplicação Cordova
:jbake-type: tutorial
:jbake-tags: tutorials 
:jbake-status: published
:icons: font
:syntax: true
:source-highlighter: pygments
:toc: left
:toc-title:
:description: Conceitos Básicos sobre Criação de uma Aplicação Cordova - Apache NetBeans
:keywords: Apache NetBeans, Tutorials, Conceitos Básicos sobre Criação de uma Aplicação Cordova

Este documento demonstra como criar um projeto HTML5 no IDE que seja encapsulado como uma aplicação móvel e executado em um simulador de dispositivo móvel. Ao criar uma aplicação HTML5, você tem a opção de criá-la usando um modelo de site Apache Cordova. O Apache Cordova oferece um grupo de APIs que permitem desenvolver uma aplicação com HTML, CSS e JavaScript encapsulada como aplicação móvel nativa. A aplicação é executada no dispositivo móvel e pode acessar as funções nativas do dispositivo, como GPS ou câmera. Usando as APIs Cordova, um desenvolvedor consegue criar uma aplicação móvel sem escrever qualquer código nativo.

Esse documento demonstra como instalar o software necessário para instalar e desenvolver uma aplicação com Cordova. Após a instalação do Cordova, você usará o modelo Cordova no assistente de Novo Projeto para criar uma aplicação Cordova. Em seguida, adicionará um código e executará a aplicação no simulador de dispositivo móvel. Este tutorial usará o simulador do iOS, mas as etapas serão semelhantes se você desejar usar um simulador de dispositivo Android.

Para ver um screencast que demonstre a implantação de uma aplicação Cordova no emulador do Android, assista ao link:../web/html5-cordova-screencast.html[+Vídeo de Conceitos Básicos sobre Desenvolvimento Cordova+].


== Para concluir este tutorial, você precisará dos recursos a seguir:

|===
|Software ou Recurso |Versão Necessária 

|link:https://netbeans.org/downloads/index.html[+NetBeans IDE, Java+] |8.0 

|link:http://www.oracle.com/technetwork/java/javase/downloads/index.html[+JDK (Java Development Kit)+] |versão 7 

|link:http://cordova.apache.org/[+Apache Cordova+] |-- 

|link:http://nodejs.com/[+NodeJS+] |-- 

|link:http://git-scm.com/[+Git+] |-- 

|SDK de Plataforma Móvel
 |Android ou
iOS 
|===

*Observações:*

* Este documento presume que já estejam instalados um SDK de plataforma móvel de destino e um emulador de dispositivo compatíveis.
* Este tutorial pressupõe que você tenha alguma experiência com programação ou algum conhecimento básico de HTML, CSS e JavaScript. Para obter mais detalhes sobre suporte a HTML5 no NetBeans IDE, consulte link:html5-gettingstarted.html[+Conceitos Básicos sobre Aplicações HTML5+]


== Instalando o Cordova

Instale o Cordova em seu sistema local para encapsular uma aplicação HTML5 como aplicação móvel nativa com o NetBeans IDE. Você usará *npm*, o gerenciador de pacote NodeJS, para instalar e atualizar o Cordova. Confirme também se o Git está instalado em seu sistema local e configurado corretamente. O Cordova usa o Git para recuperar em um repositório qualquer arquivo de código-fonte Cordova quando você encapsula a aplicação como móvel nativa.

A maioria das etapas a seguir deste exercício serão executadas na janela do terminal.

1. Faça download e instale o Node.js, se não estiver instalado.

Você pode fazer o download do instalador no link:http://nodejs.org[+site do Node.js+].


[start=2]
. Abra uma janela de terminal.

[start=3]
. Execute o comando a seguir para confirmar se o Node.js está instalado.

[source,shell]
----

$ node -v
----

Se o node.js estiver instalado, você verá uma versão impressa na janela do terminal.

*Observações.*

* Se estiver protegido por proxy, você precisará configurar o node.js para usar o proxy no acessar à rede. Execute os comandos a seguir para configurar o proxy, substituindo  ``http://proxy:8080``  pelo seu proxy.

[source,shell]
----

$ sudo npm config set proxy http://proxy:8080
$ sudo npm config set https-proxy http://proxy:8080
----

Execute o seguinte comando para exibir as definições de configuração atuais.


[source,shell]
----

$ npm config list
----
* Para obter informações adicionais sobre a configuração do node.js, consulte link:https://npmjs.org/doc/config.html[+https://npmjs.org/doc/config.html+].

[start=4]
. Execute o comando a seguir para instalar o Cordova.

[source,shell]
----

$ npm install -g cordova
----

*Observações.*

* Confirme se a configuração do proxy está correta, caso veja uma mensagem de erro na janela do terminal quando executar o comando de instalação.
* Você pode executar o seguinte comando que atualiza o Cordova para a versão mais recente.

[source,shell]
----

$ npm update -g cordova
----

[start=5]
. Execute o seguinte comando para confirmar se o Cordova está instalado e exibir a versão.

[source,shell]
----

$ cordova --version
----

Se o Cordova estiver instalado, você verá uma versão impressa na janela do terminal.


[start=6]
. Faça o download e instale o sistema de controle de versão Git se não estiver instalado.

Você pode fazer o download do instalador no link:http://git-scm.com/[+site do Git+].

*Observação.* Adicione o Git à variável de ambiente Path.


[start=7]
. Execute o comando a seguir para confirmar se o Git foi instalado.

[source,shell]
----

$ git --version
----

Se o Git estiver instalado, você verá uma versão impressa na janela do terminal.

*Observações.*

* Se estiver protegido por proxy, você precisará configurar o Git para usar o proxy no acessar à rede. Execute os comandos a seguir para configurar o proxy, substituindo  ``http://proxy:8080``  pelo seu proxy.

[source,shell]
----

$ git config --global http.proxy http://proxy:8080
$ git config --global https.proxy http://proxy:8080
----

Execute o seguinte comando para exibir as definições de configuração atuais.


[source,shell]
----

$ git config --list
----
* Para obter informações adicionais sobre a configuração do Git, consulte as instruções de configuração em link:http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup[+http://git-scm.com/book/en/Getting-Started-First-Time-Git-Setup+].

Agora você tem todas as ferramentas de que precisa para desenvolver e encapsular uma aplicação móvel nativa no IDE. No próximo exercício, você usará o assistente de Novo Projeto para criar a aplicação.


== Criando uma Aplicação Cordova

Neste exercício, você usará o assistente de Novo Projeto no IDE para criar uma nova aplicação Cordova. Crie uma aplicação Cordova selecionando o modelo Hello World do Cordova como modelo de site no assistente de Novo Projeto. O Cordova é uma aplicação HTML5 com algumas bibliotecas e arquivos de configuração adicionais. Se você tiver uma aplicação HTML5 existente, poderá usar a janela Propriedades do Projeto no IDE para adicionar os códigos-fonte do Cordova e outros arquivos exigidos para encapsular a aplicação como Cordova.

Neste tutorial, você criará um projeto HTML5 bem básico que tem um arquivo  ``index.html``  e alguns arquivos JavaScript e CSS. Você selecionará algumas bibliotecas jQuery JavaScript quando criar o projeto no assistente.

1. Selecione Arquivo > Novo Projeto (Ctrl-Shift-N; ⌘-Shift-N no Mac) no menu principal para abrir o assistente Novo Projeto.
2. Selecione a categoria *HTML5* e, em seguida, selecione *Aplicação Cordova*. Clique em Próximo.
image::images/cordova-newproject-wizard1.png[title="Modelo de Aplicação Cordova no assistente de Novo Projeto"]

[start=3]
. Digite *CordovaMapApp* como Nome do Projeto e especifique o diretório no seu computador onde você quer salvar o projeto. Clique em Próximo.

[start=4]
. Na Etapa 3. Modelo de Site, confirme se Fazer Download do Modelo On-line está selecionado e se o modelo Cordova Hello World está selecionado na lista. Clique em Próximo.
image::images/cordova-newproject-wizard2.png[title="Painel Modelos de Site no assistente da Nova Aplicação em HTML5"]

*Observação:* Você deve estar on-line para criar um projeto baseado em um dos modelos on-line da lista.


[start=5]
. Na Etapa 4. Arquivos JavaScript, selecione as bibliotecas JavaScript  ``jquery``  e  ``jquery-mobile``  no painel Disponível e clique no botão de seta para a direita ( > ) para mover as bibliotecas selecionadas para o painel Selecionado do assistente. Por default, as bibliotecas são criadas na pasta  ``js/libraries``  do projeto. Para este tutorial, você utilizará as versões "minimizadas" das bibliotecas JavaScript.

Você pode usar o campo de texto no painel para filtrar a lista de bibliotecas JavaScript. Por exemplo, digite *jq* no campo para ajudá-lo a encontrar as bibliotecas  ``jquery`` . Você pode usar Ctrl-clique nos nomes das bibliotecas para selecionar várias bibliotecas.

image::images/cordova-newproject-wizard3.png[title="Painel Bibliotecas de JavaScript no assistente da Nova Aplicação em HTML5"]

*Observações.*

* Você pode clicar no número de versão da biblioteca na coluna Versão para abrir uma janela pop-up que permite selecionar a ordem das versões de biblioteca. Por default, o assistente exibe a versão mais recente.
* As versões minimizadas das bibliotecas JavaScript são versões compactadas e o código não é abrangente quando exibido em um editor.

[start=6]
. Na Etapa 5. Suporte a Cordova, use os valores padrão. Clique em *Finalizar* para concluir o assistente.

Quando você clicar em Finalizar, o IDE criará o projeto e exibirá um nó para o projeto na janela Projetos,e abrirá o arquivo  ``index.html``  no editor.

image::images/cordova-projects-window1.png[title="Janela Projetos"]

Se você expandir a pasta  ``js/libs``  na janela Projetos, poderá ver que as bibliotecas JavaScript que você especificou no assistente do Novo Projeto foram automaticamente adicionadas ao projeto. Você pode remover uma Biblioteca JavaScript de um projeto clicando com o botão direito do mouse no arquivo JavaScript e escolhendo Deletar no menu pop-up.

Para adicionar uma biblioteca JavaScript a um projeto, clique com o botão direito do mouse no nó do projeto e escolha Propriedades para abrir a janela Propriedades do Projeto. Você pode adicionar bibliotecas no painel Bibliotecas JavaScript da janela Propriedades do Projeto. Como alternativa, é possível copiar um arquivo JavaScript que está no sistema local diretamente na pasta  ``js`` .

Agora você pode testar a execução do projeto e ver se ele foi implantado no emulador do seu dispositivo móvel de destino.


[start=7]
. Clique no ícone de seleção do browser na barra de ferramentas e confirme se o seu emulador de dispositivo móvel de destino está selecionado na coluna Cordova da tabela. Na coluna Cordova, você pode selecionar o Emulador do Android ou do iOS (exige OS X e XCode). 
image::images/cordova-select-browser.png[title="Browser selecionado na lista drop-down na barra de ferramentas"]

[start=8]
. Clique no ícone Executar na barra de ferramentas.

Quando você escolhe Executar, o IDE implanta a aplicação Cordova no emulador.

image::images/cordova-ios7-run.png[title="Aplicação no Simulador do iOS"]

*Observação.* Se você estiver implantando no Simulador do iOS, o simulador deverá ser aberto automaticamente. Se estiver implantando a aplicação em um emulador do Android, você precisará configurar e iniciar o emulador antes de executar a aplicação. Para ver um screencast que demonstre a implantação de uma aplicação Cordova no emulador do Android, assista ao link:../web/html5-cordova-screencast.html[+Vídeo de Conceitos Básicos sobre Desenvolvimento Cordova+].


== Modificando a Aplicação

Neste exercício, você editará os arquivos  ``index.html``  e  ``index.js`` . Você substituirá o código gerado pelo modelo Cordova Hello World pelo código de exibição de um mapa do local atual na aplicação. Além disso, modificará a configuração padrão do Cordova para remover os plug-ins do Cordova que não são necessários na aplicação.


=== Editando o Arquivo HTML

Neste exercício, edite o arquivo HTML no editor de código-fonte para adicionar referências a bibliotecas e arquivos CSS e para adicionar os elementos da página.

1. Abra `index.html` no editor (se ainda não estiver aberto).

No editor, você pode ver que o IDE gerou um código baseado no modelo Cordova Hello World.


[start=2]
. No editor, adicione referências a bibliotecas JavaScript e arquivos CSS do jQuery que foram adicionados quando você criou o projeto. Adicione o seguinte código (em *negrito*) entre as tags de abertura e fechamento  ``<head>`` .

[source,xml]
----

<html>
    <head>
        <meta charset=UTF-8">
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi">
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        
        *<link rel="stylesheet" href="js/libs/jquery-mobile/jquery.mobile.min.css"/>
        <script type="text/javascript" src="js/libs/jquery/jquery.min.js"></script>
        <script type="text/javascript" src="js/libs/jquery-mobile/jquery.mobile.min.js"></script>*
        <title>Hello World</title>
    </head>
    <body>
    ...
</html>
----

Você vê o caminho para os arquivos na janela Projetos e, como ajuda, pode usar o preenchimento de código do editor.

image::images/cordova-code-completion.png[title="Autocompletar código no editor"]

[start=3]
. Adicione o link a seguir à API JavaScript do Google Maps entre as tags `<head>`.

[source,xml]
----

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
----

*Observação.* Este é um link para a v2 obsoleta da API JavaScript. Este JavaScript funcionará para fins de demonstração neste tutorial, mas você deve usar a versão mais nova em uma aplicação real.


[start=4]
. Remova todo o código entre as tags `<body>`, exceto os seguintes links para os arquivos JavaScript `index.js` e `cordova.js`.

[source,xml]
----

   <body>
        
        *<script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>*
        
    </body> 
</html>
----

O arquivo `index.js` foi gerado automaticamente quando você criou o projeto. O arquivo pode ser visto sob o nó `js` na janela Projetos. Você modificará o código em `index.js` posteriormente no tutorial.

O `cordova.js` não é visto na janela Projetos porque é gerado na criação da aplicação Cordova.


[start=5]
. Adicione o seguinte código (em *negrito*) entre as tags  ``body`` .

[source,html]
----

   <body>
        *<div data-dom-cache="false" data-role="page" id="mylocation">
            <div data-role="header" data-theme="b">
                <h1 id="header">Searching for GPS</h1>
                <a data-role="button" class="ui-btn-right" onclick="showAbout()">About</a>
            </div>
            
            <div data-role="content" style="padding:0;">
                <div id="map" style="width:100%;height:100%; z-index:50">
                </div>

            </div>
            <div data-role="footer" data-theme="b" data-position="fixed" >
                <h4>Google Maps</h4>
            </div>
        </div>
        <div data-dom-cache="false" data-role="page" id="about">
            <div data-role="header" data-theme="b">
                <a data-role="button" data-rel="back" href="#mylocation" data-icon="arrow-l" data-iconpos="left" class="ui-btn-left">Back</a>
                <h1>About</h1></div>
            <div data-role="content" id="aboutContent">
            </div> 
            <div data-role="footer" data-theme="b" data-position="fixed" >
                <h4>Created with NetBeans IDE</h4>
            </div>
        </div>
        *
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>
----


=== Modificando a Configuração do Cordova

Neste exercício, você modificará a lista de plug-ins do Cordova que são instalados na aplicação.

1. Na janela Projetos, clique com o botão direito do mouse no nó do projeto e escolha Propriedades no menu pop-up.
2. Selecione *Cordova* na lista de categorias. 
image::images/cordova-properties-application.png[title="A guia Plug-ins do Cordova na janela Propriedades do Projeto"]

Use a guia Aplicação para exibir e editar os detalhes de configuração do Cordova sobre a aplicação que são especificados em `config.xml`.


[start=3]
. Clique na guia Plug-ins do painel Cordova.

A guia Plug-ins contém dois painéis. O painel Disponível exibe uma lista dos plug-ins do Cordova que estão disponíveis atualmente.

O painel Selecionado exibe uma lista dos plug-ins que são instalados na aplicação. Por padrão, todos os plug-ins são instalados quando você usa o modelo Cordova Hello World para criar a aplicação. A maioria das aplicações não exige todos os plug-ins. Você pode usar a guia Plug-ins na janela Propriedades do Projeto para remover os plug-ins que não são exigidos pela aplicação.

*Observação.* É possível também editar os plug-ins instalados editando o arquivo `nbproject/plugins.properties` no editor.


[start=4]
. Remova todos os plug-ins exceto API do Dispositivo, Caixas de Diálogo (Notificações) e Localização Geográfica. Clique em OK. 
image::images/cordova-properties-plugins.png[title="A guia Plug-ins do Cordova na janela Propriedades do Projeto"]


=== Editando o Arquivo JavaScript

Neste exercício, você removerá o código JavaScript gerado pelo modelo e adicionará alguns métodos simples para exibir o mapa da sua localização atual.

1. Abra o `index.js` no editor.

O IDE gerou um código padronizado em `index.js` quando você criou o projeto. Nessa aplicação, você pode remover todo o código gerado.


[start=2]
. Substitua o código gerado pelo seguinte código. Salve as alterações.

[source,java]
----

var map;
var marker;
var watchID;

$(document).ready(function() {
    document.addEventListener("deviceready", onDeviceReady, false);
    //uncomment for testing in Chrome browser
//    onDeviceReady();
});

function onDeviceReady() {
    $(window).unbind();
    $(window).bind('pageshow resize orientationchange', function(e) {
        max_height();
    });
    max_height();
    google.load("maps", "3.8", {"callback": map, other_params: "sensor=true&amp;language=en"});
}

function max_height() {
    var h = $('div[data-role="header"]').outerHeight(true);
    var f = $('div[data-role="footer"]').outerHeight(true);
    var w = $(window).height();
    var c = $('div[data-role="content"]');
    var c_h = c.height();
    var c_oh = c.outerHeight(true);
    var c_new = w - h - f - c_oh + c_h;
    var total = h + f + c_oh;
    if (c_h < c.get(0).scrollHeight) {
        c.height(c.get(0).scrollHeight);
    } else {
        c.height(c_new);
    }
}

function map() {
    var latlng = new google.maps.LatLng(50.08, 14.42);
    var myOptions = {
        zoom: 15,
        center: latlng,
        streetViewControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControl: true
    };
    map = new google.maps.Map(document.getElementById("map"), myOptions);

    google.maps.event.addListenerOnce(map, 'tilesloaded', function() {
        watchID = navigator.geolocation.watchPosition(gotPosition, null, {maximumAge: 5000, timeout: 60000, enableHighAccuracy: true});
    });
}

// Method to open the About dialog
function showAbout() {
    showAlert("Google Maps", "Created with NetBeans 7.4");
}
;

function showAlert(message, title) {
    if (window.navigator.notification) {
        window.navigator.notification.alert(message, null, title, 'OK');
    } else {
        alert(title ? (title + ": " + message) : message);
    }
}

function gotPosition(position) {
    map.setCenter(new google.maps.LatLng(position.coords.latitude, position.coords.longitude));

    var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
    if (!marker) {
        //create marker
        marker = new google.maps.Marker({
            position: point,
            map: map
        });
    } else {
        //move marker to new position
        marker.setPosition(point);
    }
}
----

*Observação.* Neste tutorial, a chamada para o método `onDeviceReady` é definida como comentário porque o método não é necessário quando você está implantando a aplicação em um emulador de dispositivo móvel. Para executar a aplicação em um web browser, desfaça o comentário da chamada para o método `onDeviceReady`.


[start=3]
. Redefina o emulador reiniciando-o ou redefinindo as definições.

[start=4]
. Clique em Executar na barra de ferramentas para implantar a aplicação no emulador. 

No Simulador do iOS, você é solicitado a permitir que a aplicação use sua localização atual.

image::images/cordova-ios7-run1.png[title="Prompt de localização na aplicação"]

Você pode testar uma localização simulada no Simulador do iOS selecionando Depurar > Localização > Localização Personalizada no menu principal do Simulador do iOS para abrir a caixa de diálogo Localização Personalizada.

image::images/cordova-ios-customlocation.png[title="Caixa de diálogo Localização Personalizada no Simulador do iOS"]

Se você digitar 48.8582 no campo Latitude e 2.2945 no campo Longitude como sua localização atual, a aplicação exibirá a Torre Eiffel no mapa.

image::images/cordova-ios7-run3.png[title="Aplicação ao usar uma localização personalizada no Simulador do iOS"]


== Depurando a Aplicação

Neste exercício, você definirá um ponto de interrupção no arquivo JavaScript e executará a aplicação novamente.

1. Redefina ou reinicie o emulador.
2. Abra o `index.js` no editor.
3. Coloque um ponto de interrupção clicando na margem esquerda da seguinte linha no método `gotPosition`.

[source,java]
----

var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
----

[start=4]
. Clique em Executar na barra de ferramentas para executar a aplicação novamente.

Quando você executar a aplicação, o depurador atingirá o ponto de interrupção quando a aplicação tentar determinar sua localização atual.

image::images/cordova-debug-breakpoint1.png[title="Depurador interrompido no ponto de interrupção"]

Se passar o cursor do mouse sobre as variáveis, você poderá ver uma dica de ferramenta que exibe detalhes sobre a variável. Se o cursor estiver sobre a variável `latitude`, o valor da variável será exibido na dica de ferramenta.

image::images/cordova-debug-variables1b.png[title="Dica de ferramenta mostrando variáveis"]

Se o cursor estiver sobre `position` ou `coords`, a dica de ferramenta terá uma seta na qual você pode clicar para expandir a dica.

image::images/cordova-debug-variables1a.png[title="Dica de ferramenta mostrando variáveis"]

A dica de ferramenta expandida permite que você veja os valores com mais detalhes.

image::images/cordova-debug-variables2.png[title="Dica de ferramenta mostrando variáveis"]

Nesse caso, é mais fácil ver os valores na janela Variáveis. Na janela Variáveis, você vê a latitude e longitude da sua localização atual.

image::images/cordova-debug-variables.png[title="Janela Variáveis"]

Na janela Monitor de Rede, você vê uma lista das solicitações da aplicação.

image::images/cordova-network-monitor.png[title="Janela Variáveis"]


[[summary]]
== Resumo

Neste tutorial, você aprendeu a instalar e configurar o software exigido para criar uma aplicação Cordova no IDE. Aprendeu também a criar uma aplicação Cordova e modificar algumas definições de configuração Cordova.

link:/about/contact_form.html?to=3&subject=Feedback:%20Getting%20Started%20with%20Creating%20a%20Cordova%20Applications[+Enviar Feedback neste Tutorial+]


[[seealso]]
== Consulte Também

Para obter mais informações sobre suporte para aplicações no HTML5 no IDE, consulte os seguintes recursos em link:https://netbeans.org/[+netbeans.org+]:

* [Vídeo] link:../web/html5-cordova-screencast.html[+Conceitos Básicos sobre o Desenvolvimento de Cordova+]
* link:html5-editing-css.html[+Trabalhando com Folhas de Estilo de CSS em Aplicações em HTML5+]. Um documento que continua com a aplicação que você criou neste tutorial que demonstra como usar alguns assistentes de CSS e janelas do IDE e como usar o modo Inspecionar no browser Chrome para localizar visualmente os elementos nas origens do projeto.
* link:html5-js-support.html[+Depurando e Testando JavaScript em Aplicações em HTML5+]. Um documento que demonstra como o IDE oferece ferramentas que podem ajudá-lo a depurar e testar arquivos JavaScript no IDE.
* link:http://www.oracle.com/pls/topic/lookup?ctx=nb8000&id=NBDAG2272[+Criando Arquivos JavaScript+] em _Desenvolvendo Aplicações com o NetBeans IDE_

Para obter mais informações sobre o jQuery, consulte a documentação oficial:

* Home Page Oficial: link:http://jquery.com[+http://jquery.com+]
* Home Page da IU: link:http://jqueryui.com/[+http://jqueryui.com/+]
* Tutoriais: link:http://docs.jquery.com/Tutorials[+http://docs.jquery.com/Tutorials+]
* Página Principal da Documentação: link:http://docs.jquery.com/Main_Page[+http://docs.jquery.com/Main_Page+]
* Demonstrações de IU e Documentação: link:http://jqueryui.com/demos/[+http://jqueryui.com/demos/+]