Aula 66 - Loja Online - JQuery
Antes de seguir na construção do
ecommerce, vamos ter algumas aulas para entender como funciona
jQuery.
O que é
JQuery e porque usar?
JQuery é uma
biblioteca JavaScript rápida,
pequena e
rica em
recursos.
Iremos usar ele para poder ter mais funcionalidades com javascript na parte do
frontend.
Página oficial do jQuery
Segundo o site
https://w3techs.com/technologies/details/js-jquery/3,
jQuery é usado por
95,4% de todos os sites que fazem uso de
JavaScript.
Isso representa
78,4% de todos os sites.
Com o surgimento de estruturas de
front-end em
JavaScript como
Angular,
Vue e
React, a sintaxe peculiar do
jQuery e a implementação frequentemente modificada ficaram em segundo plano nesta nova onda de tecnologia da web.
O
jQuery tem sido usado em inúmeros projetos, desde aplicativos empresariais de comércio eletrônico a páginas de destino simples.
O
jQuery ainda é muito bom para certas coisas, como prototipagem rápida e até mesmo animação.
Antes de trazer o
jQuery para o projeto, vamos entender um pouco como ele funciona.
Fundamentos do jQuery
jQuery é uma
biblioteca JavaScript rápida,
pequena e
rica em recursos.
Torna as coisas como a passagem e manipulação de documentos
HTML,
manipulação de
eventos,
animação e
Ajax muito mais simples com uma
API fácil de usar que funciona em vários navegadores.
Com uma combinação de versatilidade e extensibilidade, o
jQuery mudou a maneira como milhões de pessoas escrevem
JavaScript.
Para começar, crie uma
pasta chamada
jquery na raiz do projeto do
ecommerce e dentro um arquivo chamado
index.html.
django_ecommerce/e_commerce/jquery/index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Agora abra um terminal e entre na pasta
django_ecommerce/e_commerce/jquery que acabamos de criar, onde inserimos o index.html.
No terminal, vamos emular um servidor com o seguinte comando:
python3 -m http.server
ou
python -m SimpleHTTPServer
E para testar se o
jquery está funcionando vamos modificar o
index.html e usar o seletor
document para disparar um alerta quando a página for carregada.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Olá mundo!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
alert("Olá!")
})
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
O script acima em
azul, usa o seletor
document, para
disparar um
alerta assim que a
página for
carregada.
Agora acesse 0.0.0.0:8000 para testar se tá funcionando.
Agora vamos usar o seletor
body para mudar a cor do background da página depois de
2 segundos, para isso vamos utilizar também a função
setTimeout().
A
setTimeout() recebe uma função que vai ser disparada depois de
2 segundos.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Olá mundo!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$('body').css("background-color": "blue")
}, 2000)
})
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Agora vamos usar o seletor
h1 para mudar a cor do
h1 depois de
2 segundos, para isso vamos utilizar também a função
setTimeout().
A
setTimeout() recebe uma função que vai ser disparada depois de
2 segundos.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
h1{
color: green;
}
</style>
</head>
<body>
<h1>Olá mundo!</h1>
<h1>Olá mundo!</h1>
<h1 id='header-3'>Olá mundo!</h1>
<h1>Olá mundo!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$('h1').css("color": "purple")
$('h1:nth-child(2)).text("Olá de novo!")
$('#header-3').text("Olá de novo header 3!")
}, 2000)
})
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Vamos acrescentar uma classe de
css chamada header para representar o
h1.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
<style>
h1{
color: green;
}
</style>
</head>
<body>
<h1 class='header'>Olá mundo!</h1>
<h1 class='header'>Olá mundo!</h1>
<h1 class='header' id='header-3'>Olá mundo!</h1>
<h1 class='header'>Olá mundo!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function(){
$('h1').css("color": "purple")
$('h1:nth-child(2)).text("Olá de novo!")
$('#header-3').text("Olá de novo header 3!")
$(".header").css("background-color", "white").css("padding", "30px")
}, 2000)
})
</script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
É isso, ficamos por aqui e até a próxima. ;)
Código final da aula:
Outros canais
Toti:
Backing track / Play-along:
Código Fluente
Putz!
Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook
Esse é o link do código fluente no Pinterest
Meus links de afiliados:
Nos vemos na próxima então, \o/ 😉 Bons Estudos!
