Professor: Arnaldo Coelho T. Junior arnaldojunior1991@gmail.
com
CONSIDERE SER MEMBRO DO CANAL NO YOUTUBE E GANHE
ACESSO A CONTEÚDOS EXCLUSIVOS!
[Link]/@ArnaldoJunior
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
O que é?
Linguagem de programação web;
Adiciona interatividade a uma página web;
Permite criar aplicações web ricas.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
ECMAScript
A linguagem JavaScript é padronizada pelo
comitê ECMA TC39, chamada ECMAScript;
O ECMAScript define:
Sintaxe da linguagem;
Mecanismos para manuseio de erros;
Tipos;
Objetos e funções embutidos.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Mudar conteúdo HTML
Aceita aspas duplas ou simples:
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Mudar valores de atributos HTML
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Mudar estilo (CSS)
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Declarações
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Ponto e Vírgula ( ; )
Separam as declarações JavaScript;
Adicione um ponto e vírgula ao fim de cada
declaração executável;
Embora não seja obrigatório, é altamente
recomendável;
Permite várias declarações em uma linha.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Espaço em Branco
JavaScript ignora múltiplos espaços;
Você pode adicionar espaços em branco para
tornar seu script mais legível:
É uma boa prática colocar espaços ao redor
dos operadores (= + - * /):
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Blocos de Código
As declarações podem ser agrupadas em
blocos de códigos;
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Palavras-Chave
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Sintaxe
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Valores
Existem dois tipos de valores: valores fixos (literais)
e valores variáveis (variáveis);
Regras para escrever literais:
Números são escritos com ou sem casas decimais;
Strings podem ser escritas dentro de aspas simples ou
duplas.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Variáveis
Usadas para armazenar valores;
Declaradas com a palavra-chave var;
Um sinal de igual (=) é usado para atribuir valores
às variáveis;
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Operadores Aritméticos
São eles:
+ (adição);
- (subtração);
* (multiplicação);
/ (divisão).
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Operador de Atribuição
Utilizado para atribuir valores às variáveis (=);
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Comentários
Não são executados;
Usar barras duplas // ou /* */
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Saídas de Dados
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Output
JavaScript pode exibir dados da seguinte forma:
Dentro de um elemento HTML – innerHTML;
Na saída HTML – [Link]();
Em uma caixa de alerta – [Link]();
No console do browser – [Link]().
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
innerHTML
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
[Link]()
Apenas deve ser utilizado para teste.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
[Link]()
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
[Link]()
Utilizado para debugging.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Operadores
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Operador de Atribuição e Adição
Atribuição
Adição
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Operador de Multiplicação
Operadores Aritméticos
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Operadores de Comparação
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Operadores Lógicos
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Tipos de Dados
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Tipos Dinâmicos em JS
Em JavaScript, as variáveis podem armazenar
diferentes tipos de dados.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript - String
Uma String é uma série de caracteres;
Pode-se utilizar aspas duplas ou simples.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript - Number
Em JS, há apenas um tipo de número, que pode
ser escrito com ou sem casa decimal.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript - Booleans
Podem ter apenas dois valores: true ou false.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript - Arrays
São usados para armazenas múltiplos valores em
uma única variável;
São escritos com colchetes;
Itens de um array são separados por vírgula;
O primeiro índice de um array é o zero.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript - Arrays
A declaração pode ter múltiplas linhas.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JS – Array usando new
A declaração pode ter múltiplas linhas.
Esta abordagem apresenta pior velocidade de
execução, pois trata a variável como um objeto.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Array - Acessando os Elementos
O acesso é feito através de um índice;
O índice inicial é o zero.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript - Objetos
Representam objetos, propriedades e métodos
da vida real.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript – Criação de Objetos
Pode-se utilizar as duas abordagens abaixo:
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Objeto - Acessando as Propriedades
É possível acessar as propriedades de duas
formas:
ou
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Objeto - Métodos
São ações que podem ser executadas pelo
objeto.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Objeto - Acessando os Métodos
É possível acessar os métodos de duas formas:
ou
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
JavaScript - Undefined
Variáveis sem valor, possuem valor e tipo
indefinidos.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
DOM (Document Object
Model)
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
O QUE É DOM?
Quando a página é carregada, o navegador
cria um DOM da página;
Define um padrão para acessar documentos
(W3C);
Separado em 3 partes:
Core DOM – Todos os tipos de documentos;
XML DOM – Documentos XML;
HTML DOM – Documentos HTML.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
O QUE É HTML DOM?
Modelo de objeto padrão e interface de
programação para HTML;
Meio de pegar, alterar, adicionar e deletar
elementos HTML.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Organizado em Árvore
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Métodos HTML DOM
Métodos são ações que podem ser executadas
sobre elementos HTML;
Propriedades são valores que podem ser
atribuídos ou alterados;
A interface de programação consiste nos
métodos e propriedades de cada objeto.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Métodos HTML DOM
getElementById – método mais comum para
acessar um elemento HTML;
innerHTML – propriedade para pegar ou alterar o
conteúdo de um elemento.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Objeto Documento
Representa a página web;
Dono de todos os objetos na página;
Ponto de acesso a qualquer elemento HTML;
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Procurar Elementos
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Mudar Elementos
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Adicionar e Deletar Elementos
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Gerenciador de Eventos
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
EVENTOS HTML DOM
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
O Que São Eventos DOM?
Uma forma de capturar e gerenciar os diferentes
tipos de eventos que podem ocorrem em um
elemento HTML;
Normalmente estão associados a uma função
que será disparada assim que o evento ocorrer.
Exemplos de Eventos HTML
Usuário clicar com o mouse;
A página web ser carregada;
Uma imagem ser carregada;
O mouse passar sobre um elemento;
Um input ter seu valor modificado;
Um formulário ser enviado;
Entre outros.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Evento click
Neste caso, quando o evento click ocorrer a
função “myFunction()” será executada.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Evento onload
Disparado quando o usuário entra em uma
página web;
Pode ser usado para verificar o tipo e a versão
do browser do visitante, para carregar a página
apropriada;
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Evento onchange
Frequentemente utilizado para validar inputs de
formulários;
Disparado quando o valor do campo muda.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Eventos onmouseover e onmouseout
O primeiro pode ser usado para chamar uma
função quando o mouse passa sobre um
elemento HTML;
O outro ocorre quando o mouse sai de cima de
um elemento HTML.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Eventos onmouseover e onmouseout
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
onmousedown e onmouseup
O primeiro ocorre quando um botão do mouse é
clicado, então, quando este botão é liberado, o
evento onmouseup é disparado. Por fim,
quando o processo de clique no mouse está
completo, o evento onclick é disparado.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
onmousedown e onmouseup
O primeiro ocorre quando um botão do mouse é
clicado, então, quando este botão é liberado, o
evento onmouseup é disparado;
Por fim, quando o processo de clique no mouse
está completo, o evento onclick é disparado.
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
onmousedown e onmouseup
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
Outros Eventos
Para uma lista com todos os eventos, acesse:
[Link]
[Link]
Professor: Arnaldo Coelho T. Junior arnaldojunior1991@[Link]
CONSIDERE SER MEMBRO DO CANAL NO YOUTUBE E GANHE
ACESSO A CONTEÚDOS EXCLUSIVOS!
[Link]/@ArnaldoJunior