Editando JavaScript

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.

Software Necessário para o Tutorial

Para concluir este tutorial, você precisa dos seguintes recursos e softwares.

Software ou Recurso Versão Necessária
NetBeans IDE 6.9 ou 7.3
Java Development Kit (JDK) 6

Funcionalidades Básicas

Nesta seção, apresentamos as funcionalidades básicas de edição de JavaScript do IDE.

Criando Novos Arquivos

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.

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.

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.

Realce de sintaxe

O IDE fornece realce de semântica verdadeiro para distinguir métodos e variáveis.

Dobramento de Código

O código do método pode ser dobrado ou expandido. No editor, clique no ícone dobrar próximo a um método e seus dobramentos. Clique no expandir ícone ao lado de um método dobrado e ele se expande. O código dobrado é indicado por uma caixa de elipses. caixa de elipses Mantenha o cursor na caixa de elipses e o IDE exibirá o método contraído.


método contraído sendo mostrado mantendo o cursor sobre as elipses

Você pode dobrar ou expandir todos os métodos no menu Exibir -> Dobramentos de Código.

Navegação

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.


guia Navegador mostrando a estrutura do arquivo Javascript

Parser de Segundo Plano

Um parser é executado em segundo plano e fornece mensagens de erro detalhadas.


parser de segundo plano mostrando o erro

Correspondência de Colchete

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.

Formatando

Pressionar nova linha recua o cursor com base em onde a próxima linha deverá estar. Pressionar um } recua a linha imediatamente. Reformatar uma seleção ou o buffer inteiro recua novamente o arquivo inteiro.

Suporte a JSON

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.

Realce de semântica

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.


snippet de código mostrando o realce

Marcar Ocorrências

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.


retornos realçados

Renomeação Instantânea

Pressione Ctrl-R/Command-R em uma variável local e você pode renomear o símbolo de forma síncrona no arquivo.


renomeando variável de forma síncrona

Refatoração

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.

Para localizar e renomear todos os usos de uma variável ou operação:

  1. Selecione uma ocorrência da variável ou operação no editor.
  2. 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.


    localizando todos os usos de variável selecionada

  3. 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.
  4. 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.


    visualização da refatoração de todos os usos

  5. 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.


    Renomeação individual não selecionada

  6. Após a revisão, clique em Refatorar e o IDE refatora todos os arquivos.

Correções Rápidas e Verificações de Semântica

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:
  • Redesignando um parâmetro
  • A função anônima nem sempre retorna um valor
  • A variável oculta o argumento
  • O código que não possui efeitos colaterais (sem chamadas, sem designações)


    código sem chamadas ou designações

  • 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.


    menu de correções rápidas para uma designação em uma condicional

  • Retornos inconsistentes de uma função (onde algumas expressões de retorno retornam um valor e outras não)


    retornos inconsistentes

Lista de tarefas

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.


lista de tarefas mostrando correções rápidas

Autocompletar Código e Análise de Tipo

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
    x = "foo";      y = x;      y.  

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.

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.


autocompletar código

Se você marcar um método com @deprecated, 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.

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:

"foo".big().charCodeAt(50).toExponential(fractionDigits);

O NetBeans primeiro vê que foo é uma String, portanto, ele procura na classe String pelo método big(). A função charCodeAt(50) 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. 

Observação: 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.

Ir Para Declaração

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:


pop-up para ir para a declaração de variável

Documentação

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).


Dica de ferramenta da documentação

Conclusão Incorporada

A funcionalidade autocompletar código nos ids de elemento no código HTML funciona para a função Prototype.js $("..."). 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 variável = $("f|") e pressionar Ctrl-Espaço com o cursor (|) imediatamente depois do f, a funcionalidade autocompletar código mostrará os ids de elemento HTML no documento que começa com f.


conclusão do ID do elemento

Incorporando

As funcionalidades de edição de JavaScript funcionam para JavaScript incorporado em arquivos RHTML, HTML e JSP.

Abrir Tipo

Pressione Ctrl-O/Command-O e salte rapidamente para qualquer uma das suas funções, entre arquivos.


ir para a caixa de diálogo de tipo

Suporte a JSDoc

Se você anotar um método com @private, ele aparece no navegador com um ícone de bloqueio. Se você anotar uma função com @constructor, ela será mostrada como um construtor (e incluída na funcionalidade autocompletar código depois da palavra-chave "new" ), e você poderá usar @class e @namespace 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 @ignore não aparecem na funcionalidade autocompletar código, mas são incluídas no índice e podem ser usadas em Ir para Declaração.


Filtragem Básica de Inclusão de Arquivo

A funcionalidade autocompletar código em HTML só inclui código dos arquivos JavaScript referenciados. Considere um projeto em que o arquivo foo.js define a função foo() e o arquivo bar.js define a função bar(). Se o arquivo hello.html incluir somente <script src="bar.js"></script>, somente a função bar() será mostrada na funcionalidade autocompletar código para hello.html.



Consulte Também

Para obter mais informações sobre o uso do NetBeans IDE para editar linguagens não Java, consulte os seguintes recursos:

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, inscreva-se na lista de correio .

get support for the NetBeans

Support


By use of this website, you agree to the NetBeans Policies and Terms of Use. © 2018, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo