Programação para Internet - JavaScript, Manuais, Projetos, Pesquisas de Desenvolvimento de Aplicações para Internet

Baixe Programação para Internet - JavaScript e outras Manuais, Projetos, Pesquisas em PDF para Desenvolvimento de Aplicações para Internet, somente na Docsity!

Programação para Internet

Módulo 4

Introdução ao JavaScript e DOM

( Document Object Model )

Prof. Dr. Daniel A. Furtado

Universidade Federal de Uberlândia

Faculdade de Computação

Introdução

 JavaScript é uma linguagem de script orientada a objetos

utilizada para desenvolvimento de aplicações Web;

 É comumente referenciada como JS ;

 Originalmente foi denominada Mocha , depois LiveScript e então

JavaScript após acordo de licença realizado entre a Netscape e a

Sun em 1995;

 Os scripts em JavaScript são normalmente executados no lado

do cliente , ou seja, no programa navegador do usuário (como

Google Chrome, Microsoft Edge, Mozilla Firefox, etc.);

 Os scripts em JavaScript são interpretados pelo navegador. Não

é necessário realizar uma compilação explícita do código;

 Não confundir com a linguagem de programação Java:

Introdução ao JavaScript

JavaScript não é nenhuma extensão ou adaptação da linguagem Java

 JavaScript é bastante utilizada em situações que exigem dinamismo e

respostas imediatas do usuário. É possível, por exemplo:

• Alterar o conteúdo e o layout da página Web em tempo de exibição;

• Executar ações para inicializar a página Web assim que ela é carregada;

• Executar ações de encerramento quando a página é fechada;

• Executar operações em resposta a ações do usuário, como “clicar em um

botão” ou “selecionar uma opção”;

• Validar o conteúdo de campos de formulários à medida que o usuário os

preenche;

 Entretanto, questões relacionadas à segurança da aplicação, como validação

efetiva dos formulários e validação de usuários, devem ser implementadas em

linguagem no lado do servidor, como PHP, ASP, etc.

Por que estudar JavaScript?

O que JavaScript pode fazer?

JavaScript pode alterar atributos de elementos HTML

Neste caso JavaScript altera o valor do atributo 'src' da imagem.

Ligar a Luz

Desligar a luz

JavaScript pode mudar o valor dos atributos dos elementos HTML

JavaScript - Motivação

Adaptado de w3schools.com

What Can JavaScript Do?

JavaScript can change the style of an HTML element.

Click Me!

 JavaScript pode mudar o estilo CSS dos elementos HTML

 Neste exemplo JavaScript é utilizada para alterar o valor da

propriedade CSS “ font-size ” do parágrafo quando o botão é

pressionado (ver Anexos/JavaScript-Exemplo03.html);

JavaScript - Motivação

Adaptado de w3schools.com

 O atributo onclick utilizado nos exemplos anteriores é denominado atributo de evento da linguagem HTML;  Um atributo de evento possibilita associar uma ação que deve ser executada quando um evento ocorrer (no caso anterior, o evento ‘clicar’ sobre o elemento);  Alguns outros atributos de eventos frequentemente utilizados:

• onMouseEnter. Quando o usuário ‘entra’ com o ponteiro do mouse sobre o elemento;
• onMouseLeave. Quando o usuário ‘retira’ o ponteiro do mouse do elemento;
• onMouseDown. Quando o usuário pressiona um botão do mouse sobre o elemento;
• onMouseUp. Quando o usuário solta o botão do mouse sobre o elemento;
• onMouseOver. Quando o usuário move o ponteiro do mouse sobre o elemento;
• onChange. Em alguns elementos, quando o seu valor ( value ) muda;
• onFocus. Quando o elemento recebe foco. Atributos de Eventos da Linguagem HTML

 Nos exemplos anteriores inserimos código JavaScript inline , ou seja,

diretamente dentro de um elemento HTML (como valor do atributo onclick );

 Também é possível inserir código JavaScript dentro do documento

HTML utilizando a TAG

 JavaScript é case sensitive;

 Declarações em JavaScript devem terminar com o

ponto-e-vírgula;

 Comentários de linha são do tipo // comentário

 Comentários de bloco são do tipo /* comentário */

Código JavaScript e HTML

 Variáveis podem ser declaradas com as palavras var ou let;

 Quando definidas com var , fora de funções, possuem

escopo global e podem ser acessadas dentro e fora da

função;

 Quando definidas com var , dentro de funções, possuem

escopo local a toda a função;

 A palavra let permite declarar variáveis de bloco, isto é,

que podem ser acessadas apenas dentro do bloco de

código em que foi definida, como um for , um if-else , etc;

 O tipo da variável é determinado automaticamente;

Variáveis

JavaScript pode gerar e mostrar dados de diferentes

maneiras:

1. Escrevendo no conteúdo de um elemento HTML por

meio da propriedade innerHTML (há propriedades

similares como innerText e textContent – pesquisar)

2. Escrevendo no documento HTML propriamente dito

usando document.write(‘conteudo’) ;

3. Escrevendo em uma caixa de mensagens usando

window.alert(‘mensagem’) ;

4. Escrevendo no console do navegador, para fins de

desenvolvimento/debug, usando console.log(‘info’).

Saída de Dados

Adaptado de w3schools.com

Linguagem JavaScript

**Utilizando document.write para gerar conteudo**

Clique aqui!

Saída de Dados - Exemplo

 window, document e console são objetos;

 alert, write e log são métodos dos respectivos objetos;

 Para exibição do console do navegador, tecle e procure pela aba console.

 O método prompt apresenta uma caixa de diálogo com um campo para preenchimento;  Retorna uma string correspondente ao texto informado no campo; ou null caso o usuário clique no botão “Cancelar”; Caixa de Diálogo de Entrada - prompt ... var nome = prompt ( 'Informe o seu nome:' ); if ( nome != null ) alert ( 'Bem vindo, ' + nome ); ...

 O valor retornado pela função prompt é sempre do tipo string (exceto o valor null )  Assim, caso seja fornecido um número inteiro no campo de texto, deve- se fazer a conversão para inteiro antes de processar o número (por exemplo, utilizando a função parseInt ). Exemplo:  Similarmente, a função parseFloat faz a conversão de string para float ; Caixa de Diálogo de Entrada - prompt ... var str = prompt ( 'Informe um número inteiro:' ); if ( str != null ) { var x = parseInt(str); dobro = 2 * x; alert ( 'O dobro do numero eh: ' + dobro ); } ...