| <!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 aprimoradas que são modeladas no suporte já fornecido para Java e outras linguagens. Este guia fornece uma visão geral dessas funcionalidades.</p> |
| |
| <div class="indent"> |
| <h3>Conteúdo</h3> |
| <img alt="O conteúdo desta página aplica-se ao NetBeans IDE 7.3" class="stamp" src="../../../images_www/articles/73/netbeans-stamp.png" title="O conteúdo desta página se aplica ao NetBeans IDE 7.3"> |
| |
| <ul class="toc"> |
| <li><a href="#basic">Funcionalidades Básicas</a></li> |
| <li><a href="#mark_occurrences">Marcação de Ocorrências e Renomeação Instantânea</a> </li> |
| <li><a href="#code_completion">Autocompletar Código e Análise de Tipo </a></li> |
| <li><a href="#documentation">Documentação</a></li> |
| <li><a href="#open_type">Abrir Tipo </a></li> |
| <li><a href="#jsdoc_support">Suporte a JSDoc </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="http://www.netbeans.org/downloads/index.html">NetBeans IDE</a></td> |
| <td class="tbltd1">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 ou 7</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> |
| <div class="indent"> |
| <h3>Criando Novos Arquivos</h3> |
| <p>Você pode criar um novo arquivo JavaScript em qualquer projeto usando o assistente Novo Arquivo. Selecione Arquivo > Novo Arquivo no menu principal e selecione Arquivo JavaScript na categoria HTML/JavaScript no assistente. Se a categoria de HTML/JavaScript não estiver disponível na sua instalação, você poderá escolher Arquivo JavaScript na categoria Outro no assistente Novo Arquivo. Se você quiser que o arquivo JavaScript fique visível na janela Projeto, crie o arquivo JavaScript em uma subpasta apropriada do projeto, tal como <tt>public_html</tt> ou <tt>src</tt>.</p> |
| <p>O modelo default usado para arquivos JavaScript contém somente informações de licenciamento. Para adicionar conteúdo ao modelo, selecione Ferramentas > Modelos no menu principal para abrir o Gerenciador de Modelos. Selecione o modelo de Arquivos JavaScript na categoria HTML/JavaScript e clique em Abrir no Editor para editar o modelo JavaScript.</p> |
| |
| <h3>Realce de Sintaxe e Semântica</h3> |
| <p>O editor oferece realce de código para métodos e variáveis, assim como variáveis globais e propriedades de objetos literais.</p> |
| <img alt="guia Navegador mostrando a estrutura do arquivo Javascript" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-highlighting.png" title="Guia Navegador mostrando a estrutura do arquivo Javascript"> |
| |
| <h3>Dobramento de Código</h3> |
| <p>O código do método, os comentários e blocos de código entre colchetes podem ser dobrados ou expandidos. Clique nos ícones <img alt="dobrar" src="../../../images_www/articles/73/ide/js-editor/collapse_node.png"> e <img alt="expandir" src="../../../images_www/articles/73/ide/js-editor/expand_node.png"> ao lado da margem esquerda do editor para dobrar e expandir o código. Uma caixa em elipse indica código dobrado e você pode posicionar o cursor sobre essa caixa para exibir o código recolhido. É possível dobrar ou expandir rapidamente todas as pastas do arquivo escolhendo Exibir > Compactação do Código no menu principal.</p> |
| <img alt="dobramento de código" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/js-codefold.png" title="Dobramento de código"> |
| <p>É possível criar também dobras personalizadas com descrições e especificar o estado default.</p> |
| <pre class="examplecode">// <editor-fold desc="This is my custom fold"> |
| Your code goes here... |
| // </editor-fold></pre> |
| |
| <h3>Navegação</h3> |
| <p>A janela Navegador exibe a estrutura do arquivo JavaScript e e permite navegar facilmente pelos elementos no código.</p> |
| <img alt="guia Navegador mostrando a estrutura do arquivo Javascript" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-nav.png" title="Guia Navegador mostrando a estrutura do arquivo Javascript"> |
| |
| <h3><a name="goto"></a>Ir Para Declaração</h3> |
| <p>Pressione Ctrl e mantenha o cursor sobre uma linha do código; em seguida clique no nome da variável para ir para a declaração da variável. </p> |
| |
| <h3>Parser de Segundo Plano</h3> |
| <p>Um parser é executado em segundo plano e oferece advertências detalhadas e dicas para resolver problemas potenciais. É possível configurar as dicas de JavaScript exibidas na guia Dicas da janela Opções.</p> |
| <img alt="Tela da Guia Dicas de JavaScript na janela Opções" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-hints.png" title="Guia Dicas de JavaScript na janela Opções"> |
| |
| <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>A guia Formatação da janela Opções permite especificar opções para arquivos JavaScript, incluindo recuo, espaços e quebra de linha.</p> |
| <img alt="Tela da Guia Formatação na janela Opções" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-formatter.png" title="Guia Formatação na janela Opções"> |
| |
| <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> |
| |
| <h3><a name="embedding"></a>Incorporando</h2> |
| <p>As funcionalidades de edição de JavaScript também funcionam para código JavaScript incorporado em arquivos PHP, JSP e HTML.</p> |
| </div> |
| |
| <h2><a name="mark_occurrences"></a>Marcação de Ocorrências e Renomeação Instantânea</h2> |
| <p>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> |
| <img alt="retornos realçados" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-occur.png" title="Retornos realçados"> |
| <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> |
| |
| |
| <h2><a name="code_completion"></a>Autocompletar Código e Análise de Tipo</h2> |
| <p>A funcionalidade autocompletar código JavaScript permite que as classes principais de JavaScript incorporadas no IDE sejam inseridas no seu código. Por exemplo, se você escrever o seguinte código:</p> |
| <pre> x = "foo"; y = x; y. </pre> |
| <p>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. 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> |
| <img alt="tela do recurso autocompletar código no editor" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-codecompletion.png" title="Funcionalidade autocompletar código no editor"> |
| <p> Se você marcar um método com <tt>@deprecated</tt>, ele ficará suprimido da janela Navegador. 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> |
| |
| <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.</p> |
| |
| <h2><a name="documentation"></a>Documentação</h2> |
| <p>A funcionalidade autocompletar código mostra a documentação das APIs de JavaScript principais e das APIs de 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> |
| <img alt="tela da dica de ferramenta da documentação" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-doc.png" title="Documentação do jQuery na dica de ferramenta"> |
| <p>A documentação da funcionalidade autocompletar código para jQuery também está disponível no editor.</p> |
| <img alt="tela da dica de ferramenta da documentação" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-jquerydoc.png" title="Documentação do jQuery na dica de ferramenta"> |
| |
| <h2><a name="open_type"></a>Abrir Tipo</h2> |
| <p>Pressione Ctrl-O/Command-O e salte rapidamente para qualquer uma das suas funções, entre arquivos. <p> |
| <img alt="ir para a caixa de diálogo de tipo" class="margin-around b-all" src="../../../images_www/articles/73/ide/js-editor/jseditor-gototype.png" title="Ir para a caixa de diálogo de tipo"> |
| |
| <h2><a name="jsdoc_support"></a>Suporte a JSDoc</h2> |
| <p>O IDE agora suporta JSDoc na versão 2, ScriptDoc e ExtDoc. 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 o <tt>@constructor</tt>, ele será mostrado como um construtor (e incluído na funcionalidade autocompletar depois da palavra-chave "new").</p> |
| |
| |
| <div class="feedback-box" ><a href="/about/contact_form.html?to=3&subject=Feedback:%20JavaScript%20Editing%20in%20NetBeans%20IDE%206.1">Enviar Feedback neste Tutorial</a></div> |
| <br style="clear:both;"> |
| <!-- ======================================================================================= --> |
| <h2><a name="seealso"></a>Consulte Também</h2> |
| <p>Para obter mais informações sobre o trabalho com o editor JavaScript no NetBeans IDE, consulte os recursos a seguir. </p> |
| <ul> |
| <li>Demo:<a href="../../docs/web/html5-javascript-screencast.html"> HTML5 - Parte 3: Testando e Depurando JavaScript em Aplicações em HTML5</a></li> |
| <li><a href="../../docs/webclient/html5-js-support.html">Depurando e Testando JavaScript em Aplicações em HTML5</a></li> |
| <li><a href="https://blogs.oracle.com/netbeansphp/entry/javascript_code_folding">Dobramento de Código JavaScript:</a> no NetBeans para blog PHP.</li> |
| <li><a href="https://blogs.oracle.com/netbeansphp/entry/jquery_support">Suporte a jQuery</a> no NetBeans para PHP.</li> |
| <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> |
