Your SlideShare is downloading. ×
0
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Minicurso Javascript
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Minicurso Javascript

213

Published on

Minicurso de Javascript oferecido aos alunos da FATEC.

Minicurso de Javascript oferecido aos alunos da FATEC.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
213
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×