• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Minicurso Javascript
 

Minicurso Javascript

on

  • 293 views

Minicurso de Javascript oferecido aos alunos da FATEC.

Minicurso de Javascript oferecido aos alunos da FATEC.

Statistics

Views

Total Views
293
Views on SlideShare
293
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Minicurso Javascript Minicurso Javascript Presentation Transcript

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