Download
1 / 26
260 likes | 335 Views
PrograMação para internet. Prof.: Jean Carlo Mendes Jean.mendes@gmail.com web@mendesnet.com.br http://www.jeancarlomendes.com.br. JavaScript. O HTML é especializado na formatação das páginas Web. Somente com o HTML não conseguimos, por exemplo, validar os campos de um formulário.
E N D
PrograMação para internet Prof.: Jean Carlo Mendes Jean.mendes@gmail.com web@mendesnet.com.br http://www.jeancarlomendes.com.br
JavaScript • O HTML é especializado na formatação das páginas Web. • Somente com o HTML não conseguimos, por exemplo, validar os campos de um formulário. • Como adição aos recursos do HTML, podemos usar linguagens de script como o VBScript e o JavaScript.
JavaScript • O JavaScript foi desenvolvido pela Netscape e era compatível com a versão 2.0 do navegador • A linguagem VBScript foi desenvolvido pela Microsoft em resposta à Netscape. • O VbScript acabou caindo em desuso e o JavaScript tomado como padrão.
JavaScript • Primeiro deve ficar claro que JavaScript <> Java • O JavaScript é uma linguagem de script que é interpretada pelo browser. É portanto uma linguagem que roda no lado “cliente” de uma aplicação Web. • JavaScript é uma linguagem baseada na orientação a objetos, o que significa na prática que os elementos da página são tradados como objetos.
JavaScript • Existem duas formas para se inserir um código JavaScript em uma página HTML: • Usar a tag <script> dentro do cabeçalho da página e então escrever as funções • Usar um arquivo externo contendo o código JavaScript e referencia-lo na página em que será usado • Primeiramente vamos utilizar a primeira abordagem
JavaScript • Os códigos JavaScript são acionados à partir de “eventos” que ocorrem na página, como por exemplo: carregamento da página (onLoad), clique de um botão (onClick), o sair do mouse sobre um elemento (onBlur), pressionamento de uma tecla (onKeyDown), etc...
JavaScript – Hello World <HTML> <HEAD> <script type="text/javascript"> functionola() { alert('Ola Mundo'); } </script> </HEAD> <BODY onload=ola();>’ Exemplo Hello World em js. </BODY> </HTML> Exemplo
JavaScript – Hello World É possivel ainda escrever o código JavaScript diretamente em alguns elementos do HTML... Vamos ver o mesmo exemplo anterior com o código direto na tagBody.... <BODY onload=“alert(‘Olá Mundo’)”> Exemplo
JavaScript – Hello World Mais um exemplo simples ... Exemplo
JavaScript – Hello World Mais um exemplo simples ... Exemplo
JavaScript – Hierarquia de Objetos Navigator: Possui propriedades para o nome e para a versão do navegador que está sendo usado. Exemplo Window: É o objeto de mais alto nível. Possui propriedades que se aplicam à janela como um todo. Exemplo
JavaScript – Hierarquia de Objetos Document: Contêm informações sobre a página (ou documento), incluindo os dados sobre os elementos dos formulários e links. Form: Guarda informações específicas à respeito dos formulários History: Mantêm uma lista de todos os sites visitados na sessão atual do navegador Location: Possui informações sobre o local da página e informações de protocolo e domínio
JavaScript – Eventos Os eventos são o principal recurso do JavaScript para a validação de campos e a alteração dinâmica da página.
JavaScript – JavaScript possui: Funções: Exemplo: functioncalculaMedia(num1, num2) { num3 = (num1+num2)/2; return num3; }
JavaScript – Variáveis: As variáveis em JS não são tipadas... Nome=“Jean Carlo”; Idade=18; Hoje=date(); O nome de variável deve começar com um caracter ou um “_” seguidos de números ou letras sem espaço. JS é case sensitive
JavaScript – Caracteres especiais: \n insere uma quebra de linha \t insere tabulação \r retorna para o inicio da linha \f insere um avanço de página
JavaScript – Operadores iguais ao do Java X=20; X=20/10+5; X+=2; X++; ++X; Y--; etc...
JavaScript – Operadores iguais ao do Java A=“primeiro”; B=“segundo”; C= primeiro + “ “ + segundo;
JavaScript – Estrutura condicional <script> if (condicao) { executar operacao } else { executa outra operacao } </script>
JavaScript – Estrutura condicional <script> switch(variavel) { case 1: document.write('Opção 1'); break; case 2: document.write('Opção 2'); break; case 3: document.write('Opção 3'); break; default: document.write('Padrão'); break; } </script>
JavaScript – Laços de repetição <script> functionescreveLinha() { for (i=0; i<= 10; i++) { document.write('Linha '+i + '<br>'); } } </script> Exemplo
JavaScript – Laços de repetição <script> functionescreveLinha() { var var1; var1=1; while(var1 <= 10) { document.write('linha '+var1 + ‘<br>'); var1++; } } </script> Exemplo
Exercicio – 6 pts – data? (parte 1) Criar um formulário em HTML contendo os seguintes campos: • Nome: Aceitar no máximo 80 caracteres • Email: deve conter @ e domínio • Telefone: pode aceitar apenas números, espaço e parentes ex.: (31) 3721 1234 • CPF: deve ser válido • Validar todos os campos antes de submeter
Exercicio – 6 pts – data? (parte 2) Criar um formulário em HTML contendo os seguintes campos que esteja apto a receber dados para calculo de parcelas de emprestimo. • O usuário irá informar o valor total desejado e a quantidade de parcelas. • O código javascript deve ser capaz de calcular os juros (compostos) sobre o valor desejado e retornar o valor da parcela (o valor dos juros deve ser distribuído nas parcelas de forma que todas as parcelas tenham o mesmo valor) • Apresentar em um “alert” a quantidade e valor das parcelas
