| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> |
| <html> |
| <!-- Copyright (c) 2010, Oracle and/or its affiliates. All rights reserved. --> |
| <!-- Use is subject to license terms.--> |
| <head> |
| <title>Editando JavaScript - Tutorial do NetBeans IDE</title> |
| <meta name="description" |
| content="A document describing improved JavaScript editing features in NetBeans IDE."> |
| <link rel="stylesheet" href="../../../netbeans.css"> |
| |
| <meta HTTP-EQUIV="Content-Type" Content="text/html; charset=UTF-8"></head> |
| |
| <body> |
| <h1>Editando JavaScript</h1> |
| |
| <p>O NetBeans IDE fornece funcionalidades de edição de JavaScript aprimorados que são modelados no suporte já fornecido para Java, Ruby e outras linguagens. Este guia fornece uma visão geral dessas funcionalidades.</p> |
| |
| <div class="indent"> |
| <h3>Conteúdo</h3> |
| |
| <p><img alt="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e superior" class="stamp" src="../../../images_www/articles/71/netbeans-stamp-71-72-73.png" title="O conteúdo desta página se aplica ao NetBeans IDE 6.9 e superior"></p> |
| |
| <ul class="toc"> |
| <li><a href="#basic">Funcionalidades Básicas</a></li> |
| <li><a href="#semantic_highlighting">Realce de Semântica</a></li> |
| <li><a href="#mark_occurrences">Marcar Ocorrências</a> </li> |
| <li><a href="#instant_rename">Renomeação Instantânea</a></li> |
| <li><a href="#refactoring">Refatoração</a></li> |
| <li><a href="#quickfixes">Correções Rápidas e Verificações de Semântica </a></li> |
| <li><a href="#tasklist">Lista de Tarefas</a></li> |
| <li><a href="#code_completion">Autocompletar Código e Análise de Tipo </a></li> |
| <li><a href="#goto">Ir para a Declaração </a></li> |
| <li><a href="#documentation">Documentação</a></li> |
| <li><a href="#embedded_completion">Conclusão Incorporada </a></li> |
| <li><a href="#embedding">Incorporando</a></li> |
| <li><a href="#open_type">Abrir Tipo </a></li> |
| <li><a href="#jsdoc_support">Suporte a JSDoc </a></li> |
| <li><a href="#basic_file_filtering">Filtragem Básica de Inclusão de Arquivo </a></li> |
| <li><a href="#seealso">Consulte Também</a></li> |
| </ul> |
| </div> |
| <h3 class="tutorial">Software Necessário para o Tutorial</h3> |
| |
| <p><b>Para concluir este tutorial, você precisa dos seguintes recursos e softwares.</b></p> |
| |
| <table> |
| <tbody> |
| <tr> |
| <th class="tblheader" scope="col">Software ou Recurso</th> |
| <th class="tblheader" scope="col">Versão Necessária</th> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="https://netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">6.9 ou 7.3</td> |
| </tr> |
| <tr> |
| <td class="tbltd1"><a href="http://java.sun.com/javase/downloads/index.jsp">Java Development Kit (JDK)</a></td> |
| <td class="tbltd1">6</td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <h2><a name="basic"></a>Funcionalidades Básicas</h2> |
| |
| <p>Nesta seção, apresentamos as funcionalidades básicas de edição de JavaScript do IDE.</p> |
| |
| <h3>Criando Novos Arquivos</h3> |
| |
| <p>Você pode criar um novo arquivo JavaScript em qualquer projeto usando o assistente Novo Arquivo. Clique em Novo ->Outro para abrir o assistente. No assistente, abra a categoria Outro e selecione o arquivo JavaScript. Um novo arquivo JavaScript é criado de um modelo.</p> |
| |
| <p>Se você quiser que o arquivo JavaScript fique visível no editor do projeto, crie o arquivo JavaScript em uma subpasta apropriada do projeto, tal como src.</p> |
| |
| <p>O modelo JavaScript default contém somente informações de licenciamento. Para adicionar o conteúdo ao modelo, vá para Ferramentas -> Modelos e abra o modelo JavaScript no IDE.</p> |
| |
| <h3>Realce de sintaxe</h3> |
| |
| <p>O IDE fornece <a href="#semantic_highlighting">realce de semântica</a> verdadeiro para distinguir métodos e variáveis.</p> |
| |
| <h3>Dobramento de Código</h3> |
| |
| <p>O código do método pode ser dobrado ou expandido. No editor, clique no ícone <img alt="dobrar" src="../../../images_www/articles/72/ide/javascript/collapse_node.png"> próximo a um método e seus dobramentos. Clique no <img alt="expandir" src="../../../images_www/articles/72/ide/javascript/expand_node.png"> ícone ao lado de um método dobrado e ele se expande. O código dobrado é indicado por uma caixa de elipses. <img alt="caixa de elipses" src="../../../images_www/articles/72/ide/javascript/ellipsis_box.png"> Mantenha o cursor na caixa de elipses e o IDE exibirá o método contraído.</p> |
| |
| <p><br><img alt="método contraído sendo mostrado mantendo o cursor sobre as elipses" border="1" src="../../../images_www/articles/72/ide/javascript/show_collapsed_method.png" title="Método contraído mostrado mantendo cursor sobre elipses"> |
| |
| <p>Você pode dobrar ou expandir todos os métodos no menu Exibir -> Dobramentos de Código.</p> |
| |
| <h3>Navegação</h3> |
| |
| <p>A guia Navegador do IDE exibe a estrutura do arquivo JavaScript. O Navegador reconhece as definições de classe de estilo protótipo e as mostra como classes com métodos.</p> |
| |
| <p><br><img alt="guia Navegador mostrando a estrutura do arquivo Javascript" border="1" src="../../../images_www/articles/72/ide/javascript/js_navigator.png" title="Guia Navegador mostrando a estrutura do arquivo Javascript"> |
| |
| <h3>Parser de Segundo Plano</h3> |
| |
| <p>Um parser é executado em segundo plano e fornece mensagens de erro detalhadas.</p> |
| |
| <p><br><img alt="parser de segundo plano mostrando o erro" border="1" src="../../../images_www/articles/72/ide/javascript/background_parser.png" title="Parser de segundo plano mostrando o erro"> |
| |
| <h3>Correspondência de Colchete</h3> |
| |
| <p>Os colchetes se fecham automaticamente. Digitar ', ", [, ( ou { insere um símbolo de fechamento correspondente. Digitar o símbolo de fechamento sobreporá o símbolo já inserido. Dar backspace no símbolo de abertura remove o símbolo correspondente.</p> |
| |
| <h3>Formatando</h3> |
| |
| <p>Pressionar nova linha recua o cursor com base em onde a próxima linha deverá estar. Pressionar um <code>}</code> recua a linha imediatamente. Reformatar uma seleção ou o buffer inteiro recua novamente o arquivo inteiro.</p> |
| |
| <h3>Suporte a JSON</h3> |
| |
| <p>Os arquivos JSON são tratados como JavaScript. O parser de segundo plano é executado em um modo JSON especial em que permite somente uma expressão literal de objeto sem funções, etc.</p> |
| |
| <h2><a name="semantic_highlighting"></a>Realce de semântica</h2> |
| |
| <p>As declarações do método são mostradas em negrito (incluindo declarações de estilo de protótipo em literais de objeto), as variáveis globais são mostradas em verde, as variáveis não utilizadas são mostradas em sublinhado cinza.</p> |
| |
| <p><br> <img alt="snippet de código mostrando o realce" border="1" src="../../../images_www/articles/72/ide/javascript/highlighting.png" title="snippet de código mostrando o realce"></p> |
| |
| <h2><a name="mark_occurrences"></a>Marcar Ocorrências</h2> |
| Colocar o cursor em um símbolo realça outros usos da mesma variável ou chamada. Além disso, colocar o cursor em uma palavra-chave de função realçará todos os retornos desse método (retornar, lançar). Isso também deve acontecer se você colocar o cursor em um retorno. <p><br> <img alt="retornos realçados" border="1" src="../../../images_www/articles/72/ide/javascript/mark_occurences.png" title="Retornos realçados"><br> <br> |
| <h2><a name="instant_rename"></a>Renomeação Instantânea</h2> |
| <p>Pressione Ctrl-R/Command-R em uma variável local e você pode renomear o símbolo de forma síncrona no arquivo. </p> |
| <p><br><img alt="renomeando variável de forma síncrona" border="1" src="../../../images_www/articles/72/ide/javascript/instant_rename.png" title="Renomear todas as instâncias de variável para 'number' em todo arquivo"> <br> |
| </p> |
| <h2><a name="refactoring"></a>Refatoração</h2> |
| <p>Você pode encontrar todos os usos de uma variável ou operação em um produto. Depois de localizar esses usos, você pode renomear todas as ocorrências da variável ou operação e refatorar todo o produto. Antes de realizar a refatoração, você pode exibir as alterações em uma IU de tela dividida.</p> |
| <p><strong>Para localizar e renomear todos os usos de uma variável ou operação:</strong></p> |
| <ol> |
| <li>Selecione uma ocorrência da variável ou operação no editor.</li> |
| <li>Selecione Editar-> Localizar Usos (Alt-F7). Você tem a opção de pesquisar os comentários assim como o código ativo. A view Usos se abre, mostrando uma view em árvore de todos os usos da variável ou operação. |
| <p><br><img alt="localizando todos os usos de variável selecionada" border="1" src="../../../images_www/articles/72/ide/javascript/find_usages.png" title="Localizando Todos os usos da variável Abstract"></p> |
| <li>Selecione a variável no editor novamente e selecione Refatorar -> Renomear (Ctrl-R/Command-R). É aberta uma caixa de diálogo em que você digita o novo nome.</li> |
| <li>Clique em Visualizar. A view Refatoração se abre com uma view em árvore das substituições à esquerda e uma tela dividida do arquivo original e refatorado à direita. <p><br> <img alt="visualização da refatoração de todos os usos" border="1" src="../../../images_www/articles/72/ide/javascript/refactoring_preview.png" title="Visualização da refatoração de todos os usos"></p> |
| </li> |
| <li>Você pode optar por não renomear a variável ou operação em lugares individuais. Cancele a seleção da renomeação individual na view em árvore à esquerda. |
| <p><br><img alt="Renomeação individual não selecionada" border="1" src="../../../images_www/articles/72/ide/javascript/unselected_individual_renaming.png" title="Renomeação individual não selecionada"></p> |
| <li>Após a revisão, clique em Refatorar e o IDE refatora todos os arquivos. |
| </ol> |
| <h2><a name="quickfixes"></a>Correções Rápidas e Verificações de Semântica</h2> |
| O IDE realiza muitas verificações de semântica no código JavaScript e oferece correções rápidas. Para exibir as correções rápidas, selecione Código-fonte -> Corrigir Código (Alt-Enter). As verificações de semântica incluem: |
| <ul><li>Redesignando um parâmetro </li> |
| <li>A função anônima nem sempre retorna um valor </li> |
| <li>A variável oculta o argumento </li> |
| <li> O código que não possui efeitos colaterais (sem chamadas, sem designações) |
| <p><br><img alt="código sem chamadas ou designações" border="1" src="../../../images_www/articles/72/ide/javascript/nosideeffect.png" title="Código sem chamadas ou designações"> </li> |
| <li>Uma designação em uma condicional (se x = y). Esse erro de semântica possui várias correções rápidas associadas a ele, tal como a conversão para uma expressão ==, e a adição de parâmetros duplos para desativar a advertência. <br> |
| <p><br> <img alt="menu de correções rápidas para uma designação em uma condicional" border="1" src="../../../images_www/articles/72/ide/javascript/accidental_assignment.png" title="Menu de correções rápidas para uma designação em uma condicional"> </li> |
| <li> Retornos inconsistentes de uma função (onde algumas expressões de retorno retornam um valor e outras não) <p><br> <img alt="retornos inconsistentes" border="1" src="../../../images_www/articles/72/ide/javascript/inconsistent_return.png" title="Retornos inconsistentes"> |
| </li> |
| </ul> |
| <h2><a name="tasklist"></a>Lista de tarefas</h2> |
| O parser de segundo plano e as correções rápidas de advertência são integradas com a lista de tarefas. Abra a lista de tarefas (Janela -> Lista de Tarefas) para exibir os erros em qualquer um dos arquivos associados ao JavaScript. Clique duas vezes em uma tarefa nessa lista e o editor vai para a linha relevante. |
| <p><br> <img alt="lista de tarefas mostrando correções rápidas" src="../../../images_www/articles/72/ide/javascript/tasklist.png" title="Lista de tarefas mostrando correções rápidas"></p> |
| <h2><a name="code_completion"></a>Autocompletar Código e Análise de Tipo</h2> |
| A funcionalidade autocompletar código JavaScript permite que as classes principais de JavaScript incorporadas no IDE sejam inseridas no seu código. Por exemplo, você pode escrever |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>e a funcionalidade autocompletar código mostrará os métodos disponíveis para strings JavaScript. A funcionalidade autocompletar código funciona com todos os tipos de literal no JavaScript. A análise de tipo e a funcionalidade autocompletar código também conhecem sobre classes de estilo de protótipo (somente funções regulares) e o novo operador para construí-las.</p> |
| <p> O NetBeans IDE consulta parâmetros de tipo para parâmetros de função e tipos de retorno (@type, @param). Esses tipos são mostrados na funcionalidade autocompletar código: na lista, na documentação e nas dicas do parâmetro (Ctrl-P). Os tipos de retorno também são mostrados na caixa de diálogo para autocompletar código depois do nome da função, separados por dois-pontos. </p> |
| <p><br> <img alt="autocompletar código" border="1" src="../../../images_www/articles/72/ide/javascript/code_completion.png" title="Autocompletar código"> |
| <p> Se você marcar um método com <tt>@deprecated</tt>, ele será realçado no navegador e nas chamadas de autocompletar código para esse método. A descrição obsoleta associada é mostrada em uma seção separada na documentação de autocompletar código com um segundo plano realçado. |
| |
| <p> O NetBeans IDE também pode determinar o tipo de retorno para muitas funções. Essa função é essencial para suporte a JSQuery. Por exemplo, os métodos que retornam verdadeiro ou falso possuem um tipo de retorno Booliano, aqueles que retornam números literais possui um tipo de retorno Número, etc. O IDE infere os tipos e controla explicitamente os tipos declarados por meio de comentários. A implicação mais importante é que o IDE segue os tipos pelas chamadas. Se você possui código como este:</p> |
| |
| <pre>"foo".big().charCodeAt(50).toExponential(fractionDigits);</pre> |
| |
| <p>O NetBeans primeiro vê que <tt>foo</tt> é uma String, portanto, ele procura na classe String pelo método <tt>big()</tt>. A função <tt>charCodeAt(50)</tt> nessa String é o tipo Número; portanto, se você aplicar autocompletar código em "to" aqui, verá somente os métodos disponíveis em Número. |
| <p><strong>Observação: </strong>A procura por tipos de retorno envolve uma consulta ao índice, o que pode levar tempo; portanto, durante a análise de tipo, o IDE observa o relógio e, após ou dois segundos, ele aborta o cálculo de tipo. Isso pode ser relevante para funções grandes, ou computadores lentos, ou computadores rápidos sob uma carga de trabalho pesada. |
| <h2><a name="goto"></a>Ir Para Declaração</h2> |
| Pressione Ctrl e mantenha o cursor sobre uma linha de código. Clique com o botão esquerdo do mouse no nome da variável. Quando o IDE não sabe o tipo da sua variável (e, portanto, a função de destino) ele lhe oferece um menu pop-up de todas as declarações das variáveis do seu projeto: |
| <p><br> <img alt="pop-up para ir para a declaração de variável" border="1" src="../../../images_www/articles/72/ide/javascript/goto.png" title="Pop-up para ir para a declaração de variável"><br> <br> |
| <h2><a name="documentation"></a>Documentação</h2> |
| Autocompletar código mostra a documentação das APIs javascript principais e das APIs DOM. Você também pode exibir a documentação das suas próprias funções. Ctrl-apontar para as chamadas também mostra a documentação (como uma dica de ferramenta). <p><br> <img alt="Dica de ferramenta da documentação" border="1" src="../../../images_www/articles/72/ide/javascript/documentation.png" title="Dica de ferramenta da documentação"> <br> |
| <h2><a name="embedded_completion"></a>Conclusão Incorporada</h2> |
| A funcionalidade autocompletar código nos ids de elemento no código HTML funciona para a função <tt>Prototype.js $("...")</tt>. Para ver a funcionalidade autocompletar código em ids de elemento, pressione Ctrl-Espaço nos pontos de interrogação. Por exemplo, se você adicionar a <em>variável </em> = $("f<strong>|</strong>") e pressionar Ctrl-Espaço com o cursor (<strong>|) </strong>imediatamente depois do f, a funcionalidade autocompletar código mostrará os ids de elemento HTML no documento que começa com f. |
| <p><br> <img alt="conclusão do ID do elemento" border="1" src="../../../images_www/articles/72/ide/javascript/embedded_completion.png" title="Conclusão do ID do elemento"><br> <br> |
| <h2><a name="embedding"></a>Incorporando</h2> |
| As funcionalidades de edição de JavaScript funcionam para JavaScript incorporado em arquivos RHTML, HTML e JSP. <br> <br> |
| <h2><a name="open_type"></a>Abrir Tipo</h2> |
| Pressione Ctrl-O/Command-O e salte rapidamente para qualquer uma das suas funções, entre arquivos. <p><br> <img alt="ir para a caixa de diálogo de tipo" src="../../../images_www/articles/72/ide/javascript/find_type.png" title="Ir para a caixa de diálogo de tipo"><br> <br> |
| <h2><a name="jsdoc_support"></a>Suporte a JSDoc</h2> |
| <p>Se você anotar um método com <tt>@private</tt>, ele aparece no navegador com um ícone de bloqueio. Se você anotar uma função com <tt>@constructor</tt>, ela será mostrada como um construtor (e incluída na funcionalidade autocompletar código depois da palavra-chave "new" ), e você poderá usar <tt>@class</tt> e <tt>@namespace</tt> para designar explicitamente as funções a determinadas classes (embora o analisador de tipo quase sempre possa designar essas funções automaticamente). As funções marcadas com <tt>@ignore</tt> não aparecem na funcionalidade autocompletar código, mas são incluídas no índice e podem ser usadas em <a href="#goto">Ir para Declaração</a>. </p> |
| <br> |
| <h2><a name="basic_file_filtering"></a>Filtragem Básica de Inclusão de Arquivo</h2> |
| A funcionalidade autocompletar código em HTML só inclui código dos arquivos JavaScript referenciados. Considere um projeto em que o arquivo <tt>foo.js</tt> define a função <tt>foo()</tt> e o arquivo <tt>bar.js</tt> define a função <tt>bar()</tt>. Se o arquivo <tt>hello.html</tt> incluir somente <tt><script src="bar.js"></script></tt>, somente a função <tt>bar()</tt> será mostrada na funcionalidade autocompletar código para <tt>hello.html</tt>. <br> |
| <p><br> |
| </p> |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20JavaScript%20Editing%20in%20NetBeans%20IDE%206.1">Envie-nos Seu Feedback</a></div> |
| <br style="clear:both;"> |
| <!-- ======================================================================================= --> |
| <h2><a name="seealso"></a>Consulte Também</h2> |
| <p>Para obter mais informações sobre o uso do NetBeans IDE para editar linguagens não Java, consulte os seguintes recursos: </p> |
| <ul> |
| <li>As seções JavaScript, Python e Groovy da <a href="../../trails/java-ee.html">Trilha de Aprendizado do JavaEE e do Java Web</a> </li> |
| <li>A <a href="../../trails/php.html">trilha de aprendizado da Aplicação PHP</a>.</li> |
| </ul> |
| <p>Para enviar comentários e sugestões, obter suporte e se manter informado sobre os mais recentes desenvolvimentos das funcionalidades de desenvolvimento Java EE do NetBeans IDE, <a href="../../../community/lists/top.html">inscreva-se na lista de correio nbj2ee@netbeans.org</a>.</p> |
| </body> |
| </html> |
