Editando JavaScript

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.

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 7.3
Java Development Kit (JDK) 6 ou 7

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. 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 public_html ou src.

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.

Realce de Sintaxe e Semântica

O editor oferece realce de código para métodos e variáveis, assim como variáveis globais e propriedades de objetos literais.

guia Navegador mostrando a estrutura do arquivo Javascript

Dobramento de Código

O código do método, os comentários e blocos de código entre colchetes podem ser dobrados ou expandidos. Clique nos ícones dobrar e expandir 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.

dobramento de código

É possível criar também dobras personalizadas com descrições e especificar o estado default.

// <editor-fold desc="This is my custom fold">
   Your code goes here...
// </editor-fold>

Navegação

A janela Navegador exibe a estrutura do arquivo JavaScript e e permite navegar facilmente pelos elementos no código.

guia Navegador mostrando a estrutura do arquivo Javascript

Ir Para Declaração

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.

Parser de Segundo Plano

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.

Tela da Guia Dicas de JavaScript na janela Opções

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

A guia Formatação da janela Opções permite especificar opções para arquivos JavaScript, incluindo recuo, espaços e quebra de linha.

Tela da Guia Formatação na janela Opções

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.

Incorporando

As funcionalidades de edição de JavaScript também funcionam para código JavaScript incorporado em arquivos PHP, JSP e HTML.

Marcação de Ocorrências e Renomeação Instantânea

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

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

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, se você escrever o seguinte código:

    x = "foo";      y = x;      y.  

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

tela do recurso autocompletar código no editor

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

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.

Documentação

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

tela da dica de ferramenta da documentação

A documentação da funcionalidade autocompletar código para jQuery também está disponível no editor.

tela da dica de ferramenta da documentação

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

O IDE agora suporta JSDoc na versão 2, ScriptDoc e ExtDoc. Se você anotar um método com @private, ele aparece no navegador com um ícone de bloqueio. Se você anotar uma função com o @constructor, ele será mostrado como um construtor (e incluído na funcionalidade autocompletar depois da palavra-chave "new").


Consulte Também

Para obter mais informações sobre o trabalho com o editor JavaScript no NetBeans IDE, consulte os recursos a seguir.

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. © 2013, Oracle Corporation and/or its affiliates. Sponsored by Oracle logo