Programação para web JavaScript

Transcrição

1 Programação para web JavaScript Professor: Harlley Lima Departamento de Computação Centro Federal de Educação Tecnológica de Minas Gerais Belo Horizonte, 4 de maio 2016

2 Programação para web JavaScript 2/44 Aula de hoje Aula de hoje: harlley/web/aula09

3 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

4 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

5 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

6 Programação para web JavaScript 6/44 Aplicando JavaScript ao HTML JavaScript interno: dentro de um documento HTML no corpo do elemento script

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

8 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

9 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

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

11 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

12 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 : ponto flutuante true, false: booleanos

13 Programação para web JavaScript 13/44 Variáveis JavaScript permite a criação de variáveis através da palavra chave var:

14 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>");

15 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

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

17 Concatenação de strings Programação para web JavaScript 17/44

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

19 Atribuição Programação para web JavaScript 19/44

20 Relacionais Programação para web JavaScript 20/44

21 Programação para web JavaScript 21/44 Lógicos && ( E )

22 Programação para web JavaScript 22/44 Lógicos && ( E )

23 Programação para web JavaScript 23/44 Lógicos ( OU )

24 Programação para web JavaScript 24/44 Lógicos ( OU )

25 Programação para web JavaScript 25/44 Lógico! (Não) d > 0.5!(d <= 0.5)

26 Estrutura condicional Programação para web JavaScript 26/44

27 Estrutura condicional Programação para web JavaScript 27/44

28 Estrutura de repetição Programação para web JavaScript 28/44

29 Estrutura de repetição Programação para web JavaScript 29/44

30 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

31 Função Programação para web JavaScript 31/44

32 Função Programação para web JavaScript 32/44

33 Função Programação para web JavaScript 33/44

34 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;

35 Programação para web JavaScript 35/44 Métodos e tamanho de um array Consultando o tamanho: tamanho = valores.length; Percorrendo um array:

36 Programação para web JavaScript 36/44 Métodos e tamanho de um array Consultando o tamanho: tamanho = valores.length; Percorrendo um array:

37 Adicionando elementos Programação para web JavaScript 37/44

38 Adicionando elementos Programação para web JavaScript 38/44

39 Removendo elementos Programação para web JavaScript 39/44

40 Removendo o último elemento Programação para web JavaScript 40/44

41 Programação para web JavaScript 41/44 String Acessando os caracteres de uma string por posição

42 Programação para web JavaScript 42/44 String Recuperando trecho de uma string

43 Programação para web JavaScript 43/44 String Dividindo uma string

44 Programação para web JavaScript 44/44 Aula de hoje Lista de exercícios: harlley/web/aula09 Aula de hoje: harlley/web/aula09