Minicurso Javascript
-
Upload
wilker-iceri -
Category
Technology
-
view
223 -
download
0
description
Transcript of Minicurso Javascript
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!