Ir para o curso

Página 11: JavaScript

/pt/criacao-de-sites/css-cascading-style-sheets/content/

JavaScript

Podemos entender a JavaScript como uma linguagem de programação que tem variáveis, funções, ciclos e condicionais entre outras características. Através dela podemos modificar os elementos html do documento, processar e validar dados do usuário ou fazer requisições de recursos para o servidor.

Conceitos básicos

Variáveis

Na programação, uma variável é um nome pelo qual podemos nos referir a um espaço na memória do computador. Em JavaScript não é necessário especificar o tipo de dados que a variável conterá e uma variável pode conter qualquer tipo de dados em um determinado momento. Abaixo você encontra várias maneiras de declarar variáveis.

Condicionais

Uma condicional é uma instrução de programação que permite executar um ou outro código dependendo se o resultado de uma operação é falso ou verdadeiro. Em JavaScript, temos comparações de igualdade, maior que e menor que e operadores lógicos como and e or. Veja o exemplo

Ciclos

É muito comum ter que aplicar os mesmos processos a uma grande quantidade de dados. Para isso utilizamos os ciclos que nos permitem repetir a execução de um mesmo código. Aqui estão dois exemplos, o ciclo for e o ciclo while.

Funções

O objetivo das funções na programação é agrupar os códigos que são usados com muita frequência. Em JavaScript, as funções também podem se comportar como variáveis e esta é uma das suas características mais importantes. Veja os comentários no exemplo a seguir.

Objetos

A programação que é orientada por objetos nos permite criar um programa de computador como um conjunto de coisas que fazem algo. Na prática, um objeto se assemelha a uma estrutura de dados que também possui funções que operam em seus próprios dados. Como o JavaScript é uma linguagem de programação orientada por objetos, podemos ver várias operações com objetos no exemplo abaixo.

Eventos

A programação que é orientada por eventos nos permite escrever programas que não são executados de forma linear, mas que executam uma parte do código como resposta a um evento. Um evento pode ser algo que ocorre por exemplo, quando clicamos com o mouse ou quando acorre a abertura de uma rede de conexão. O JavaScript é uma linguagem voltada para eventos, onde podemos conectar funções com eventos, para desta forma interagir com o usuário. No exemplo abaixo conectamos um mouse com uma função anônima. 

JavaScript no navegador

Os navegadores oferecem um ambiente de execução de JavaScript onde podemos manipular o documento html e executar algumas operações de rede. As possibilidades que temos são determinadas pela DOM API (Document Object ModelApplication Program Interface) que é simplesmente uma lista de objetos e métodos disponíveis para isso. Existem muitas operações que podemos fazer em um documento html, a seguir mostraremos algumas.

Operações de seleção

Semelhante aos seletores de CSS, temos operações que retornam um ou mais elementos do documento. Observe os comentários no exemplo abaixo.

Operações de estilo

Através destas operações podemos alterar as propriedades dos elementos html do código JavaScript, como fizemos com o estilo da fonte no exemplo a seguir.

Operações com elementos multimídia

Os elementos multimídia possuem atributos e eventos especiais que outros elementos não possuem. Neste exemplo, vemos alguns atributos do elemento de vídeo.

Operações de red

É possível fazer requisições para o mesmo servidor que estamos visitando para obter recursos como texto, html, dados ou arquivos, isso é feito com a técnica AJAX (Asynchronous JavaScript And XML) que nos permite fazer a requisição sem sair do documento atual. Neste exemplo vemos uma requisição GET.

Operações com eventos

Através do JavaScript é possível associar funções aos eventos do documento html, assim podemos gerar uma maior interação com os usuários. No exemplo abaixo, associamos uma função que será executada quando um vídeo terminar.

O código JavaScript é implementado como um arquivo de texto plano com extensão js. Você deve associar o arquivo js ao documento html usando a tag do script.

/pt/criacao-de-sites/bibliotecas-templates-e-estrutura-frontend/content/