Minicurso Javascript

417 visualizações

Publicada em

Minicurso de Javascript oferecido aos alunos da FATEC.

Publicada em: Tecnologia
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
417
No SlideShare
0
A partir de incorporações
0
Número de incorporações
4
Ações
Compartilhamentos
0
Downloads
13
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Minicurso Javascript

  1. 1. Minicurso JavaScript Instrutor: Wilker Iceri
  2. 2. O que é JavaScript? • É uma linguagem de programação que pode ser usada em páginas web, dispositivos móveis, tablets, e também no lado do servidor (back-end). • O código JavaScript pode ser inserido dentro das páginas HTML. • Todos os browsers modernos interpretam JavaScript. • Linguagem orientada a objeto
  3. 3. O que o JS pode fazer? • Reagir a eventos como um click do mouse, foco no campo, após o carregamento da página, etc. • Manipular os elementos HTML dinamicamente. • Manipular os estilos dos elementos dinamicamente.
  4. 4. Aonde colocar o código JS? • Existem 3 formas de inserir um código JavaScript no seu documento: • Direto no atributo de uma tag. • Interno. • Externo (mais utilizado e recomendado). Acessar o exemplo
  5. 5. HTML DOM Acessar o HTML do exemplo
  6. 6. Variáveis • As variáveis no JavaScript são fracamente tipadas. • No JavaScript existem as variáveis globais e as variáveis locais. • As variáveis são case-sensitive. • Podem começar com letras, $ ou _. • Sintaxe: var indentificador = expressão; • Caso o var não seja informado, o JavaScript cria a variável no escopo global, mesmo ela estando dentro de uma função por exemplo.
  7. 7. Variáveis Acessar o exemplo
  8. 8. Funções • Uma função é um bloco de código que é executado quando alguém chama ele. • Pode receber uma lista de argumentos. • Pode retornar um valor. Acessar o exemplo
  9. 9. Tipos de Dados • Como o JavaScript é uma linguagem fracamente tipada, uma variável pode receber diferentes tipos de dados. • São eles: • undefined – variável sem valor. • null – variável com valor nulo (vazia). • Number – representa números inteiros e decimais. • String – representa um conjunto de caracteres. • Boolean – representa valores booleanos (true ou false) • Array – representa um conjunto de elementos. • Objetos – representa um conjunto de propriedades com nome/valor. • Date – representa uma data e hora. • RegExp – representa uma expressão regular.
  10. 10. Null e undefined Acessar o exemplo
  11. 11. Number • Alguns métodos: • toFixed(x) – formata o número com x digitos após a casa decimal. • toPrecision(x) – formata o número para o tamanho x. Acessar o exemplo
  12. 12. String • Alguns métodos: • split(divisor) – divide a string em um array de strings. • indexOf(str) – retorna a posição da primeira ocorrência de str na string ou -1 caso não encontre. • replace(oldStr, newStr) – trocas todas as oldStr’s encontradas pela newStr. • toLowerCase() – retorna a string com as letras minúsculas. • toUpperCase() – retorna a string com as letras maiúsculas. Acessar o exemplo
  13. 13. Array • Alguns métodos: • unshift(value) – adiciona o value no inicio do array. • push(value) – adiciona o value no fim do array. • join(divisor) – junta todos os itens do array em uma string, separados pelo divisor. • reverse() – inverte a ordem do array. • sort() – ordena o array. • indexOf(value) – retorna a posição do value, e caso não encontre retorna -1. • shift() – remove o primeiro elemento do array. • pop() – remove o último elemento do array.
  14. 14. Array Acessar o exemplo
  15. 15. Date • Alguns métodos: • getTime() – obtêm a data e hora em milissegundos, começando de 01.0.1.1970. • setFullYear(year, month, day) – define uma data. O mês e dia são opcionais. • getUTCDate() – retorno o dia do mês (0 – 31) . • getUTCMonth() – retorna o mês (0-11). • getUTCFullYear() – retorno o ano (4 dígitos). • getHours() – retorna a hora (0-23). • getMinutes() – retorna os minutos (0-59). • getSeconds() – retorna os segundos (0-59).
  16. 16. Date Acessar o exemplo
  17. 17. Math • O Math não é um construtor, suas propriedades e métodos são estáticos. • Alguns métodos e propriedades: • Math.PI – retorna o PI. • Math.sqrt(num) – retorna a raiz quadrada de num. • Math.min(a,b,...n) – retorna o menor número entre os passados como argumento. • Math.max(a,b,...n) – retorna o maior número entre os passados como argumento. • Math.random() – retorna um número aleatório de 0 à 1; • Math.round(num) – arredonda o num para o inteiro mais próximo.
  18. 18. Math Acessar o exemplo
  19. 19. Object • Quase tudo no JavaScript é um objeto, Booleans, Numbers, Strings, Dates, Functions, etc. • null e undefined não podem ser tratados como objetos, eles são exceção. • JavaScript não usa classes, como a maioria das linguagens orientadas a objetos. • objetos tem propriedades: • Exemplo: pessoa.nome; • objetos tem métodos: • Exemplo: pessoa.getNome();
  20. 20. Object Acessar o exemplo
  21. 21. Object Acessar o exemplo
  22. 22. Object Acessar o exemplo
  23. 23. Manipulação de Elementos Acessar o exemplo
  24. 24. Eventos • Ações que podem ser disparadas quando algo ocorre, esse algo pode ser um clique de um botão, o pressionamento de uma tecla, etc. • As principais categorias de eventos são: • Eventos de mouse. • Eventos de teclado. • Eventos de formulário.
  25. 25. Eventos de Mouse • Alguns eventos: • onclick() – acionado quando o usuário clica no elemento que tem o evento declarado. • onmouseover() – acionado quando o usuário passa o mouse sobre o elemento. • onmouseout() – acionado quando o usuário remove o mouse do elemento. Acessar o exemplo
  26. 26. Eventos de Teclado • São eles: • onkeydown() – Ocorre quando o usuário está pressionando uma tecla. • onkeypress() – Ocorre quando o usuário pressiona uma tecla. • onkeyup() - Ocorre quando o usuário solta a teclado após pressioná-la. Acessar o exemplo
  27. 27. Eventos de Formulário • Alguns eventos: • onblur() – Ocorre quando um elemento perde o foco. • onchange() – Ocorre quando o conteúdo do elemento é alterado. • onfocus() - Ocorre quando o elemento recebe foco. Acessar o exemplo
  28. 28. Projeto Final • No formulário de contato, quando o usuário clicar em Enviar você deve validar os campos e exibir o valor de cada um em um alert. • Validações: • Não é permitido nome em branco. • Não é permitido email inválido. • Não é permitido mensagem em campo. Bom trabalho!

×