Programação para web JavaScript Professor: Harlley Lima E-mail: harlley@decom.cefetmg.br Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 4 de maio 2016
Programação para web JavaScript 2/44 Aula de hoje Aula de hoje: http://www.dcc.ufmg.br/ harlley/web/aula09
Programação para web JavaScript 3/44 O que é JavaScript Linguagem de script (interpretada) criada pela Netscape-Sun É uma linguagem de interação com o navegador Sintaxe parecida com C, C++ e Java JavaScript não é Java
Programação para web JavaScript 4/44 Funcionalidades de JavaScript Interação com o usuário Validação de formulário Manipular o conteúdo de uma página Detectar navegador Ler e escrever dados do cliente em cookies Cuidado: nem todos os navegadores executam JavaScript da mesma forma
Programação para web JavaScript 5/44 Tipos de JavaScript Client-Side JavaScript (Web browser) código é embutido no HTML precisa ser interpretado pelo browser Server-side JavaScript: Node.js
Programação para web JavaScript 6/44 Aplicando JavaScript ao HTML JavaScript interno: dentro de um documento HTML no corpo do elemento script
Programação para web JavaScript 7/44 Aplicando JavaScript ao HTML JavaScript externo: o código JavaScript pode ser definido em um arquivo separado e depois associado aos documentos HTML através do elemento script Ex.: <script src = script.js ></script>
Programação para web JavaScript 8/44 Carregamento O elemento script colocado dentro do corpo do head: a página só será exibida depois do carregamento do JavaScript
Programação para web JavaScript 9/44 Carregamento O elemento script foi colocado no final do body: JavaScript só será carregado depois de todos os outros elementos do body
Programação para web JavaScript 10/44 Carregamento Normalmente, a segunda abordagem é mais recomendada pois as páginas web são exibidas mais rapidamente aos usuários. Contudo, eventualmente, o código JavaScript deve ser utilizado antes do processamento dos elementos do body. Nesses casos, é necessário utilizar a primeira abordagem.
Programação para web JavaScript 11/44 Chrome DevTools Os navegadores oferecem alguns recursos para testar código JavaScript. Ex.: Console do Chrome DevTools e FireBug do Firefox
Programação para web JavaScript 12/44 Estrutura da linguagem Letras maiúsculas letras minúsculas Comentários: // /*... */ Valores constantes: Joao Sergio : string 8,-12: inteiro na base 10 3.1415: ponto flutuante true, false: booleanos
Programação para web JavaScript 13/44 Variáveis JavaScript permite a criação de variáveis através da palavra chave var:
Programação para web JavaScript 14/44 Entrada e saída window.prompt: abre uma janela para pedir uma string ao usuário. Ex: nome = window.prompt( Qual o seu nome"); window.alert: abre uma janela para exibir um aviso ao usuário. Ex: window.alert ( Senha incorreta: Acesso negado"); document.write: escreve algum texto na página. Ex: document.write( <h1>minha Página</h1>");
Programação para web JavaScript 15/44 Conversão expĺıcita de tipos parseint(str) Converte uma string em um número inteiro parsefloat(str) Converte uma string em um número real
Programação para web JavaScript 16/44 Operadores As operações aritméticas em JavaScript obedecem as mesmas regras da matemática com relação à precedência dos operadores e parênteses.
Concatenação de strings Programação para web JavaScript 17/44
Programação para web JavaScript 18/44 Concatenação de strings Observe que o operador + foi aplicado a um valor numérico e a um texto. Nesses casos, o valor numérico é, automaticamente, transformado em texto e a concatenação é realizada.
Atribuição Programação para web JavaScript 19/44
Relacionais Programação para web JavaScript 20/44
Programação para web JavaScript 21/44 Lógicos && ( E )
Programação para web JavaScript 22/44 Lógicos && ( E )
Programação para web JavaScript 23/44 Lógicos ( OU )
Programação para web JavaScript 24/44 Lógicos ( OU )
Programação para web JavaScript 25/44 Lógico! (Não) d > 0.5!(d <= 0.5)
Estrutura condicional Programação para web JavaScript 26/44
Estrutura condicional Programação para web JavaScript 27/44
Estrutura de repetição Programação para web JavaScript 28/44
Estrutura de repetição Programação para web JavaScript 29/44
Programação para web JavaScript 30/44 Função São identificadas por nome Podem ou não receber parâmetros Podem ou não retornar um valor Parênteses são obrigatórios mesmo sem parâmetros
Função Programação para web JavaScript 31/44
Função Programação para web JavaScript 32/44
Função Programação para web JavaScript 33/44
Programação para web JavaScript 34/44 Array Variável indexada capaz de armazenar um conjunto de valores Tamanho pode ser alterado dinamicamente Itens acessados utilizando o operador [] Inicialização: var v = new Array(); ou var v = []; var nome = [ Harlley, Augusto, De Lima ]; nome[0] = Joao ; v[0] = 30;
Programação para web JavaScript 35/44 Métodos e tamanho de um array Consultando o tamanho: tamanho = valores.length; Percorrendo um array:
Programação para web JavaScript 36/44 Métodos e tamanho de um array Consultando o tamanho: tamanho = valores.length; Percorrendo um array:
Adicionando elementos Programação para web JavaScript 37/44
Adicionando elementos Programação para web JavaScript 38/44
Removendo elementos Programação para web JavaScript 39/44
Removendo o último elemento Programação para web JavaScript 40/44
Programação para web JavaScript 41/44 String Acessando os caracteres de uma string por posição
Programação para web JavaScript 42/44 String Recuperando trecho de uma string
Programação para web JavaScript 43/44 String Dividindo uma string
Programação para web JavaScript 44/44 Aula de hoje Lista de exercícios: http://www.dcc.ufmg.br/ harlley/web/aula09 Aula de hoje: http://www.dcc.ufmg.br/ harlley/web/aula09