Udemy Business

Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

JAVASCRIPT, JQUERY, AJAX e JSON Aprendendo a partir do ZERO

Name: JAVASCRIPT, JQUERY, AJAX e JSON Aprendendo a partir do ZERO
Rating: 4.4 (281 reviews)

Mais de 150 exercícios explicados linha a linha, muita prática, SCRIPT NA VEIA

Created byPerformsCode ., Moacir Casemiro

Last updated 2/2018

Portuguese

What you'll learn

Dominar com práticas o uso da Linguagem JavaScript
Dominar com práticas o uso da Framework JQUERY
Dominar com práticas o uso do AJAX e JSON
Aplicar SCRIPTS em um projeto Real
Utilizar o Visual Studio Code para desenvolver SCRIPTS

Course content

4 sections • 119 lectures • 18h 11m total length

Seja Bem-Vindo!3:06
Apresentação do professor3:19
Como o curso irá funcionar?1:47
A importância desse curso para você2:42
Ferramentas utilizadas2:23
Instalando Visual Code0:55
Outra opção de ambiente para as suas aulas1:57

LEMBRETE !!!1:15
Parte 01 - JavaScript?9:14
Conhecendo o ambiente9:42
Parte 01 - Nossa primeira linha de código6:10
Parte 01 - Variáveis12:30
EXERCÍCIO:

PASSOS:

CRIE UM FUNCIONALIDADE EM JAVASCRIPT PARA QUE NO MOMENTO DO CARREGAMENTO DA PAGINA, SEJA ATRIBUÍDO UM VALOR QUALQUER PARA UMA VARIÁVEL.

DISPARE TAMBÉM NO MOMENTO DO CARREGAMENTO DA PAGINA UM ALERTA COM O VALOR DA VARIÁVEL ANTERIOR.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Entendendo Operadores19:22
EXERCÍCIO:

PASSOS:

CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA REALIZAR OPERAÇÕES DE SOMA, MULTIPLICAÇÃO, DIVISÃO E SUBTRAÇÃO; (NÃO PRECISA UTILIZAR IF/ELSE)

DISPARE O RESULTADO NUM ALERTA;

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Operador Ternário5:11
EXERCÍCIO:

PASSOS:

CRIE UM FUNCIONALIDADE EM JAVASCRIPT PARA REPRESENTAR O USO DO OPERADOR TERNÁRIO.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Estrutura de Decisão if/else e else if4:50
EXERCÍCIO:

PASSOS:

CRIE UM FUNCIONALIDADE EM JAVASCRIPT PARA SABER ENTRE DOIS NÚMEROS, QUAL DOS DOIS É O MAIOR.

DISPARE O RESULTADO NUM ALERTA;

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Estrutura de decisão Switch Case4:56
EXERCÍCIO:

PASSOS:

CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA MONTAR UMA CALCULADORA SIMPLES UTILIZANDO O SWITCHCASE.

DISPARE O RESULTADO VIA ALERT.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Estrutura de Repetição - For6:44
EXERCÍCIO:

PASSOS:

CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA LISTAR VALORES DE UMA LISTA DE STRINGS UTILIZANDO FOR.

DISPARE O RESULTADO VIA ALERT

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Estrutura de Repetição - While7:42
EXERCÍCIO:

PASSOS:

CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA LISTAR ENQUANTO UMA VARIÁVEL TIVER O VALOR MENOR QUE 10, USANDO WHILE.

DISPARE O RESULTADO VIA ALERT

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Estrutura de Repetição - Do While6:17
EXERCÍCIO:

PASSOS:

CRIE UMA FUNCIONALIDADE EM JAVASCRIPT PARA LISTAR ENQUANTO UMA VARIÁVEL TIVER O VALOR MENOR QUE 10, USANDO DOWHILE

DISPARE O RESULTADO VIA ALERT

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Funções10:09
EXERCÍCIO:

PASSOS:

CRIE UMA FUNÇÃO EM JAVASCRIPT PARA DISPARAR UM ALERTA COM A DATA ATUAL.
ADICIONE UM BOTÃO PARA CHAMAR ESSE MÉTODO.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Arrays9:42
EXERCÍCIO:

PASSOS:

CRIE UMA FUNÇÃO EM JAVASCRIPT PARA LER UM ARRAY DE NÚMEROS ATÉ 10.
ADICIONE UM BOTÃO PARA CHAMAR ESSE MÉTODO.

*RESULTADO DO EXERCÍCIO ESTÁ EM ANEXO
Parte 01 - Arrays complemento 0111:43
O toString() é uma representação em texto do seu objeto e como o javascript é fracamente tipado, acabamos realmente obtendo uma string nesse caso.. Mas o uso do toString() vai deixar o código mais rico e fácil de entender, por você estar explicitando que aquela saída será obrigatoriamente uma string..
Parte 01 - Arrays complemento 028:07
Parte 01 - Arrays complemento 039:46
Parte 02 - Praticando com números11:41
Parte 02 - Praticando com números - Complemento 019:21
Parte 02 - Praticando com Datas13:42
O método getMonth() retorna uma matriz com os meses do ano e por esse motivo, ela inicia no índice 0, então usei o incremento "+1" para que dessa forma, os valores sejam equivalentes aos meses do ano, começando em 1 e terminando em 12.
O método getYear() retorna o números de anos a partir do ano 1900, quando removi o incremento "+1900" o método retornou exatamente 117, ou seja, 1900 + 117 = 2017..
Parte 02 - Praticando com Datas - Complemento 0110:50
Parte 02 - Praticando com Strings7:16
Parte 02 - Praticando com Strings - Complemento 012:54
Parte 02 - Praticando com Strings - Complemento 028:04
Parte 02 - Praticando com Arrays5:01
Parte 02 - Praticando com conversões9:36
Parte 02 - Praticando com Objetos8:04
Parte 02 - Praticando com elementos do Browser10:07
Parte 02 - Praticando com elementos do Browser - Complemento 017:25
Parte 02 - Manipulando elementos e Eventos HTML14:29
Parte 02 - TypeOf3:32
Parte 02 - Práticas com Mistura de Assuntos9:53
Parte 02 - Práticas com Mistura de Assuntos - Complemento 0114:46
Parte 03 - Formulários10:51
Parte 03 - Formulários - Como capturar elementos de um formulário16:09
Parte 03 - Formulários - Complemento 115:56
Parte 03 - Formulários - Complemento 219:32
Parte 03 - Formulários - Complemento 316:57
Já uma etapa percorrida - parte 14:21

O que é JQUERY ?4:12
Conhecendo o Ambiente6:08
Seletores JQuery12:32
Criando Formulário - Parte 0110:32
Criando Formulário - Parte 023:49
Criando Formulário - Parte 036:46
Criando Formulário - Parte 047:29
Criando Formulário - Parte 054:56
Validando Formulário - Parte 019:31
Validando Formulário - Parte 029:40
Validando Formulário - Parte 0311:35
Validando Formulário - Parte 045:56
Validando Formulário - Parte 0510:47
Componentes DateTimePicker8:17
Componentes Bootstrap Switch6:50
Populando Elementos13:49
Populando elementos com Angular17:22
Populando Elementos com KnockoutJS13:06
AutoComplete Parte 0112:36
AutoComplete Parte 029:46
AutoComplete Parte 037:26
Attr13:35
Attr e Get6:10
Ready e Load8:28
Utilizando Length9:36
EXERCÍCIO:

PASSOS:

1 - BASEADO A AULA CRIE UM SCRIPT PARA RETORNAR A QUANTIDADE DE SPAN DE UMA PAGINA;
Utilizando Length - Intermediário13:53
Utilizando - li: first, li:last, li:Eq9:54
EXERCÍCIO:

PASSOS:

1 - ADICIONAR UMA LISTA (UL) E 5 ITENS DA LISTA(LI);

2 - PARA CADA ITEM DA LISTA COLOCAR UM TEXTO QUALQUER;

3 - CRIAR UM SCRIPT PARA MOSTRAR EM UM ALERTA COM O CONTEÚDO DO PRIMEIRO ITEM;

4 - CRIAR UM SCRIPT PARA MOSTRAR EM UM ALERTA COM O CONTEÚDO DO ÚLTIMO ITEM;

5 - CRIAR UM SCRIPT PARA MOSTRAR EM UM ALERTA COM O CONTEÚDO DO 3 ITEM;
Utilizando - nth-child12:02
Utilizando - Not : has : odd8:13
EXERCÍCIO:

PASSOS:

1 - BASEADO A AULA, CRIE UM SCRIPT PARA RETORNAR O TEXTO DE ITENS QUE NÃO SÃO IMPARES, DE UMA SÉRIE DE 5 DIVS;
Utilizando - Find, Filter e NodeName12:44
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA MOSTRAR ATRAVÉS DE UM ALERTA O NOME DE UM ELEMENTO, NO QUAL ELE TÁ SENDO REFERENCIADO.
Utilizando - Find, ApprendTo, Text, Index12:11
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA ADICIONAR UM VALOR QUALQUER PARA UMA DIV ATRAVÉS DO ÍNDICE ;
Utilizando Replace e Contents17:19
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA MOSTRAR EM UM ALERTA UMA FRASE DENTRO DE UM PARAGRAFO.
CRIE UM SCRIPT PARA ALTERAR UMA PALAVRA NO QUAL VOCÊ ESCOLHEU, MOSTRE ESSE RESULTADO NA PRÓPRIA PAGINA
Utilizando AndSelf, Content, Filter e Each7:47
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA LOCALIZAR TODOS OS ITENS DE UM PARAGRAFO INCLUINDO O PRÓPRIO PARAGRAFO.

*Utilize o exemplo da própria aula.

<p>Então <strong>eu <span></span>realmente</strong> sou desenvolvedor web</p>
Utilizando remove, removeattr e IS8:45
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA REMOVER UM ELEMENTO ESPECIFICO DENTRO DE UMA DIV
Utilizando attr e Val()15:49
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA DESABILITAR DINAMICAMENTE UM BOTÃO DE UMA PAGINA PELO ID DO BOTÃO.
COLOQUE TODOS OS CHECKBOX E RADIO PARA SUA PAGINA CHECKED
CRIE UM SCRIPT PARA VERIFICAR SE UM CHECKBOX ESTÁ CHECADO.

SUGESTÃO PARA HTML:

<input name="" value="" type="checkbox" />
<input name="" value="" type="radio" />
Utilizando attr e Val() parte 0222:48
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA ATRIBUIR UM VALOR E RECUPERAR OS VALORES DOS ELEMENTOS ABAIXO:.

<input type="button" />
<input type="checkbox" />
<input type="hidden" />
<input type="image" />
<input type="password" />
<input type="radio" />
<input type="reset" />
<input type="submit" />
<input type="text" />

<select id="s" name="s">

<option value="option1">option one</option>
<option value="option2">option two</option>
</select>

<select size="4" multiple="multiple">
<option value="option1">option one</option>
<option value="option2">option two</option>
<option value="option3">option three</option>
<option value="option4">option four</option>
</select>
Utilizando Evento Click e Load8:54
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA REMOVER ITENS APÓS O CLICK DO USUÁRIO.

SUGESTÃO DA LISTA:

<ul>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
<li><a href="#">remove</a></li>
</ul>
Utilizando Live e after8:46
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT ADICIONAR DINÂMICAMENTE OUTROS BOTÕES AO CLIQUE EM UM LINK <A>. **UTILIZE O LIVE E AFTER
Utilizando event.preventDefault, Window.Location e Trigger17:04
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT DEMONSTRAR A DIFERENÇA ENTRE EVENT.PREVENTDEFAULT E EVENT.STOPPROPAGATION
Utilizando Clone10:19
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA CLONAR UM CAMPO INPUT DO TYPE = TEXT E OUTRO TEXTAREA.
Utilizando MouseMove8:57
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA CAPTURAR AS POSIÇÕES DE MOVIMENTOS DE DENTRO DE UMA DIV, COM BASE NO MOVIMENTO DO MOUSE.

SUGESTÃO DE CÓDIGO PARA A DIV:

<div style="margin: 400px; height: 300px; width: 100px; background: #ccc; padding: 20px">

relative to this
</div>
Utilizando Animate8:36
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT NO ESTILO DA AULA PARA MOVIMENTAR O MENU NO FORMATO VERTICAL, UTILIZANDO O ANIMATE PARA DAR M EFEITO MAIS LENTO PARA A MOVIMENTAÇÃO APÓS O CLIQUE
Utilizando SetInterval8:30
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA MOSTRAR UM CONTADOR USANDO O SETINTERVAL LIMITANDO ATÉ O NUMERO 100.
Utilizando $.fn.count7:59
Utilizando $.fn.dialog9:31
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA INTERAÇÃO COM O USUÁRIO, QUE SEJA SEMELHANTE AO APRESENTADO NA AULA, UTILIZANDO O DIALOG
Utilizando $.fn.outAndInFade11:09
Utilizando .slideUp()6:01
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA AO MOMENTO DO CLIQUE SEJA ACIONADO O EVENTO DE SLIDEUP E SLIDEDOWN, GARANTA QUE TENHA EFEITO DE ANIMAÇÃO.
Utilizando Hover()5:27
Utilizando slideToggle()3:56
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA MOVIMENTAR UMA DIV DE ACORDO COM O EXEMPLO CITADO NA AULA .
Utilizando Hide()3:45
EXERCÍCIO:

PASSOS:

BASEADO A AULA, CRIE UM SCRIPT PARA ESCONDER UMA DIV DE ACORDO COM O EXEMPLO CITADO NA AULA .
Utilizando getJSON()6:47
Utilizando eventos jQuery parte 0111:12
Nesta aula, você aprenderá os seguintes eventos:

.blur()
.change()
.click()
.contextmenu()
.dblclick()

EXERCÍCIOS:

PASSOS:

MONTE UM PEQUENO FORMULÁRIO COM DOIS CAMPOS INPUTS, DUAS OPÇÕES DE SELEÇÃO E UM BOTÃO; (IMAGINE PARA ESSE FORMULÁRIO UMA TELA DE LOGIN);
COM BASE NO PASSO ANTERIOR, EXEMPLIFIQUE OS SEGUINTES ITENS NO FORMULÁRIO CITADO ANTERIOR:

CHANGE();
BLUR() e
CLICK()

**A resposta está em anexo
Utilizando eventos jQuery parte 0213:46
Nesta aula, você aprenderá os seguintes eventos:

event.currentTarget
event.data
event.delegateTarget
event.isDefaultPrevented
Event.isImmediatePropagationStopped
Utilizando eventos jQuery parte 0313:03
Nesta aula, você aprenderá os seguintes eventos:

event.isPropagationStopped()
event.pageX
event.preventDefault()
Event.relatedTarget
event.result

EXERCÍCIOS:

PASSOS:

MOSTRE NO CARREGAMENTO DA PAGINA AS MOVIMENTAÇÕES DO MOUSE, USANDO O EVENTO - EVENT.PAGEX.
ATRAVÉS DE UM EXEMPLO DIFERENCIE O USO DO ISPROPAGATIONSTOPPED E EVENT.PREVENTDEFAULT()

**A resposta está em anexo
Utilizando eventos jQuery parte 049:24
Nesta aula, você aprenderá os seguintes eventos:

event.target
event.timeStamp
event.type
event.which
.focus()

EXERCÍCIOS:

PASSOS:

MONTE UM PEQUENO FORMULÁRIO COM UM CAMPO INPUT E UM BOTÃO;
COM BASE NO PASSO ANTERIOR, EXEMPLIFIQUE OS SEGUINTES ITENS NO FORMULÁRIO CITADO ANTERIOR:
EVENT.TARGET;
EVENT.TYPE() e
FOCUS()

**A resposta está em anexo
Utilizando eventos jQuery parte 0512:56
Nesta aula, você aprenderá os seguintes eventos:

.focusin()
.hover()
.keydown()
.keypress()
.mousedown()

EXERCÍCIOS:

PASSOS:

MONTE UM PEQUENO FORMULÁRIO COM UM CAMPO INPUT E UM BOTÃO;
COM BASE NO PASSO ANTERIOR, EXEMPLIFIQUE OS SEGUINTES ITENS NO FORMULÁRIO CITADO ANTERIOR:
KEYDOWN();
KEYPRESS() e
FOCUSIN()

**A resposta está em anexo
Utilizando eventos jQuery parte 0612:46
Nesta aula, você aprenderá os seguintes eventos:

.mouseenter()
.resize()
.scroll()
.select()
.submit()
.toggle()
.trigger()

EXERCÍCIOS:

PASSOS:
EXEMPLIFIQUE OS SEGUINTES ITENS::
- SCROLL() e
- SUBMIT()

**A resposta está em anexo

PROJETO E DESAFIO COM JQUERY8:06

PARABÉNS, POR VOCÊ TER CHEGADO ATÉ AQUI!

SEGUE EM ANEXO O SEU DESAFIO E TAMBÉM A SUA REFERENCIA PARA QUANDO PRECISAR!

ABRAÇO

MOACIR

Já uma etapa percorrida - Parte 23:10

Iniciando uma nova ETAPA - AJAX2:02
O que AJAX ?4:45
Assíncrono e Síncrono2:51
Por que precisamos do AJAX ?4:02
Como utilizar ?15:25
Montando Imagens dinâmicamentes com AJAX11:20
Recuperando Dados e tratando ERROS10:07
Como utilizar LOADING com eventos AJAX16:04
Enviando dados para o SERVIDOR - FORM11:17
Enviando dados para o SERVIDOR - BOTÃO14:39
Um ciclo completo com AJAX9:19
O que é JSON ?7:44
Utilizando JSON6:25
Parabéns2:59

Requirements

Lógica de Programação e HTML

Description

Domine as linguagens JavaScript, JQuery, AJAX e JSON através de uma metodologia voltada a práticas e necessidade diárias de um desenvolvedor Web.

Em um único curso aprenderá e ganhará experiência nas JavaScript, JQuery, AJAX e JSON.

Destaque !

O curso possui mais 90% de práticas e exercícios para te ajudar a ganhar experiência nos assuntos abordados.

De forma a ajudar no FOCO, os Módulos serão liberados com o intervalo de 15 dias depois do módulo anterior.

São mais de 100 aulas e mais de 150 exemplos práticos, JavaScript, JQuery, AJAX e JSON na veia!

Se tiver alguma dúvida de como funcionará o curso, fale diretamente comigo ou com a minha equipe, pagina soudesenvolvedorweb.

Neste curso você aprenderá a:

Criar scripts e aplica-los;
Linguagem JAVASCRIPT;
AJAX
Linguagem JQUERY;
e JSON

O Seu professor possuí mais de 17 anos de experiência em WEB, irá te proporcionar muito conhecimento e experiencia do dia a dia.

Quem é o público-alvo?

Pessoas com vontade de aprender e ganhar experiência para se tornarem desenvolvedor web;

Pessoas, que buscam se destacar como desenvolvedor WEB;

Pessoas iniciantes que buscam um espaço para se tornar um conhecedor nas linguagens;

Pessoas que trabalham com SUPORTE de TI e desejam trabalhar com desenvolvimento de Software;

Pessoas que desejam estar sempre atualizadas e participando de um grupo seleto de aprendizado em WEB

Who this course is for:

Alunos que desejam aprender a desenvolver com Scripts através de práticas

JAVASCRIPT, JQUERY, AJAX e JSON Aprendendo a partir do ZERO

What you'll learn

Explore related topics

Course content

APRESENTAÇÃO DO CONTEÚDO7 lectures • 16min

JAVASCRIPT39 lectures • 6hr 14min

JQUERY59 lectures • 9hr 42min

AJAX & JSON14 lectures • 1hr 59min

Requirements

Description

Who this course is for: