O documento apresenta um minicurso sobre JavaScript, abordando seus conceitos básicos como o que é a linguagem, onde inserir código, variáveis, funções, tipos de dados, manipulação de elementos HTML e eventos. O curso também mostra exemplos práticos de cada tópico.

1. Minicurso JavaScript
Instrutor: Wilker Iceri

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. 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. 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. HTML DOM
Acessar o HTML do exemplo

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. Variáveis
Acessar o exemplo

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. 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. Null e undefined
Acessar o exemplo

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. 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. 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. Array
Acessar o exemplo

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. Date
Acessar o exemplo

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. Math
Acessar o exemplo

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. Object
Acessar o exemplo

21. Object
Acessar o exemplo

22. Object
Acessar o exemplo

23. Manipulação de Elementos
Acessar o exemplo

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