Please enable JavaScript.
Coggle requires JavaScript to display documents.
Desenvolvimento em Javascript - 2º Semestre, Desenvolvimento em Javascript…
Desenvolvimento em Javascript - 2º Semestre
Tipos de dados e variáveis
Breve história do JavaScript
Executando JavaScript
Sintaxe da linguagem
Variáveis e tipos de dados
Array - Coleção de dados sequenciais. - var meuArray = [‘um’,2,’tres’,4];
Objeto - Coleção de dados organizados como chaves e valores que permite outros tipos de dados. - var meuObjeto = { 1: “olá”, 2: “tudo bem” }
Boolean - Variável verdadeira (true) ou falsa (false). - var variavel = true;
Numérico - Numerais inteiros ou flutuantes. - var variavel = 3;
String - Variável de texto que deve ser declarada com apóstrofos ou aspas. - var variavel = ‘Ola mundo’;
Operadores aritméticos e de comparação
Operadores aritméticos
Operador e descrição
Soma - +
Subtração - -
Multiplicação - *
Divisão - /
Exponenciação - **
Módulo (retorna o resto da divisão) - %
Operador de atribuição - =
Operadores de comparação
Operador e descrição
== - Igual.
=== - Igual e do mesmo tipo.
!= - Diferente.
!== - Diferente e de tipos diferentes.
Maior que - >
< - Menor que.
= - Maior ou igual.
<= - Menor ou igual.
Operadores Lógicos
Operador AND (&&)
Operador OR (||)
Operador NOT (não)
Estrutura Condicional IF
Operador/Expressão e significado
( - Parênteses de abertura da expressão que abriga as expressões 1 e 2. São necessários pois utilizaremos duas expressões.
(x < y) - Primeira expressão. Verifica se a variável x é menor do que y. Neste caso, é falso.
|| - Operador OR. Retornará verdadeiro se alguma das expressões for verdadeira.
(x % 2 == 1) - Segunda expressão. Verifica se x é ímpar, ou seja, se o módulo de x por 2 tem resto igual a 1. Neste caso, é verdadeiro.
) - Parênteses de fechamento da expressão principal. Como uma delas retornou verdadeiro, logo, o resultado final será verdadeiro e o bloco será executado.
Estrutura Condicional IF...ELSE
Operador vírgula
Encadeando instruções if e else
Estrutura Condicional IF...ELSE IF...ELSE
Mais de uma condição
Estrutura de repetição FOR
Cláusulas break e continue
Estrutura de repetição WHILE
Loop infinito
Estrutura de repetição DO...WHILE
Executa um bloco enquanto uma condição é verdadeira, assim como o comando while, entretanto, do... while garante que o bloco de código seja executado pelo menos uma vez, enquanto um bloco do tipo while pode não ser executado caso a condição seja inicialmente falsa.
Conceito e manipulação de array
Funções
Curiosidades => arrow functions
Objetos
Criando objetos
Consultando uma chave
Percorrendo um objeto
Desenvolvimento em Javascript - 2º Semestre
Introdução ao DOM
Introdução a eventos no DOM
Manipulando o DOM: escrevendo em um documento
Métodos e elementos DOM
getElementById: seleciona um único elemento com base em seu identificador único (id).
getElementsByTagName: seleciona todos os elementos de tags de mesmo nome especificado.
getElementsByClassName: seleciona todos os elementos que possuem determinada classe (class).
querySelectorAll: seleciona elementos a partir de um seletor CSS.
DOM CSS
('#logo'): o símbolo “#” antes do nome buscado indica que estamos procurando um ID; se estivéssemos buscando uma classe, esse símbolo seria substituído por um ponto “.”;
[0]: é importante refrisar que, mesmo que a busca retorne apenas um elemento, o método querySelectorAll retorna uma lista de itens, por isso, devemos indicar que queremos apenas o elemento no índice zero.
Introdução ao CANVAS
Desenhando formas, aplicando estilo e cores
Desenhando um círculo
Desenhando texto
Salvando como imagens
Aplicando animação e áudio
Movendo objetos
Manipulando áudio
Métodos e proprieddades XMLHTTPREQUEST
Principais métodos e propriedades
open( ): abre a conexão.
readyState: verifica o estado da conexão.
responseText: contém a resposta da conexão.
responseType: formato da resposta esperado (exemplo, json).
send( ): envia a requisição.
status: estado da requisição.
Inrodução ao AJAX
AJAX na prática
Código e descrição
0 Requisição ainda não iniciada.
1 Requisição com o servidor estabelecida.
2 Pedido foi recebido.
3 Pedido sendo processado.
4 Solicitação concluída.
Código e descrição
100 - 199 Respostas de informação.
200 - 299 Respostas de sucesso.
300 - 399 Redirecionamentos.
400 - 499 Erros do cliente.
500-599 Erros do servidor.
AJAX e banco de dados
Apresentando as principais APIS de terceiros
Consumindo dados de APIS de terceiros I
Consumindo dados de APIS de terceiros II
Definindo Eventoss
Contextualização de eventos
Exemplos de uso do evento
Importância do evento
Relacionando eventos com uma solução tradicional
Eventos em um formulário
Tipos de eventos
Eventos de formulário
Eventos de janela
Eventos de mouse
Eventos de teclado
Eventos de interface do usuário
Mutation Event e Mutation Observers
Mutation Event
Mutation Observer
Eventos de foco e desfoco
Evento foco
Evento desfoco
Eventos de interface
Interação com a página web
Interação com interface física e lógica
Interação com interface física e lógica - Eventos de formulário
Interação com interface física e lógica - Eventos de mouse
Interação com interface física e lógica - Eventos de teclado
Eventos de página
Eventos de página - Eventos CSS
Evento (Engine Standard), Evento (WebKit) e Descrição do evento
animationstart - webkitAnimationStart - Disparado quando a animação começa a ser executada.
animationiteration - webkitAnimationIteration - Disparado quando a execução da animação é repetida.
animationend - webkitAnimationEnd - Disparado quando a execução da animação é concluída.
Eventos de página - Criando um projeto
Eventos de página - Eventos HTML5
Evento e condição de ativação
onunload - É disparado quando a página é descarregada ou no caso de a janela do Browser ser fechada. Não possui confiabilidade em seu mecanismo de disparo e apresenta outros problemas que afetam, principalmente, dispositivos móveis. Atualmente, é considerado como não recomendado para uso e já é inutilizado automaticamente em navegadores como o Google Chrome e o Mozilla Firefox.
onresize - Este evento é disparado no momento em que a janela do Browser é redimensionada.
onload - É disparado quando a página está carregada.
onafterprint - O gatilho para este evento é acionado quando o usuário conclui uma solicitação de impressão da página.
onoffline - É disparado quando não há conectividade e o Browser trabalha em modo offline.
onbeforeprint - Também está relacionado à ação de impressão da página, porém ocorre antes de o documento ser impresso.
ononline - É disparado em situações que o Browser detecta conectividade e está trabalhando em modo online.
onerror - Evento disparado quando há um erro ao carregar um objeto externo, como imagem, documento etc.
Conceito de Frameworks
Diferença entre frameworks e APIS
Principais frameworks em Javascript
Introdução à configuração do ambiente
Módulos
Criando um projeto em angular
Introdução ao VUE
Componentes
Criação de uma aplicação VUE
Implementando o Vue com JavaScript
Interface CLI
Introdução e configuração do ambiente
Criação de um projeto com react
Criação do primeiro componente React
Componentes