Minicurso JavaScript

Instrutor: Wilker Iceri

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

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.

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

HTML DOM

Acessar o HTML do exemplo

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.

Variáveis

Acessar o exemplo

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

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.

Null e undefined

Acessar o exemplo

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

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

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.

Array

Acessar o exemplo

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

Date

Acessar o exemplo

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.

Math

Acessar o exemplo

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();

Object

Acessar o exemplo

Object

Acessar o exemplo

Object

Acessar o exemplo

Manipulação de Elementos

Acessar o exemplo

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.

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

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

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

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!