Link: https://www.casadocodigo.com.br/products/livro-javascript-jquery
Repsitório: https://github.com/josemalcher/Livro-Dominando-JavaScript-com-jQuery
- 1 - Apresentação
- 2 - Refazendo uma loja virtual
- 3 - Adicionando JavaScript
- 4 - Um JavaScript diferente em cada navegador
- 5 - Simplifique com jQuery
- 6 - Dominando eventos e manipulação de DOM com jQuery
- 7 - Não tenha medo do AJAX e do JSON
- 8 - Um gerenciador de tarefas com AJAX
- 9 - jQuery UI
- 10 - jQuery Mobile
- 11 - Orientação a objetos no JavaScript
- 12 - Um pouco de programação funcional
- 13 - Criando plugins para jQuery
- 14 - Dicas para usar melhor o jQuery
- 15 - E o que vem agora?
- Lista: http://forum.casadocodigo.com.br/
- repo do livro: https://github.com/pbalduino/livro-js-jquery
A figura a seguir nos dá uma ideia melhor de como o servidor vai receber menos requisições.
Document Object Model (ou Objeto Modelo do Documento), e é criada automaticamente pelo browser toda vez que carregamos um arquivo XML ou HTML válido. Esse arquivo é chamado de Documento, e cada item dentro dele (textos, imagens, botões, caixas de texto) é chamado genericamente de Elemento.
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CAP 3 - Adicinado JS</title>
</head>
<body>
<table>
<tbody>
<tr>
<td>
<div>R$ 29,90</div></dif>
</td>
<td>
<input type="number">
</td>
</tr>
</tbody>
<tr>
<td></td>
<td>Total da compra</td>
<td><div id="total">R$ 29,90</div></td>
<td></td>
</tr>
</table>
</body>
<script type="text/javascript"> //somente para estudos...isso aqui!!!
//var total = document.getElementById("total");
//alert(total.innerHTML);
var total = document.getElementById("total");
var formattedtext = floatToMoneyText(moneyTxtFLoat(total.innerHTML));
alert(formattedtext === total.innerHTML); // true
function moneyTxtFLoat(text){
var cleanText = text.replace("R$ ", "").replace(",", ".");
return parseFloat(cleanText);
}
function floatToMoneyText(value){
var text = (value < 1 ? "0" : "") + Math.floor(value * 100);
text = "R$ " + text;
return text.substr(0, text.length - 2) + "," + text.substr(-2);
}
function readTotal(){
var total = document.getElementById("total");
return moneyTxtFLoat(total.innerHTML);
}
// 3.6 ALTERANDO O CAMPO DO TOTAL
function writeTotal(value){
var total = document.getElementById("total");
total.innerHTML = floatToMoneyText(value);
}
</script>
</html>A linha iniciada por => indica o resultado da expressão e não deve ser digitada:
2 == 2;
=> true
1 == "1";
=> true
0 == [];
=> true
0 == "";
=> truePorém, quando você utiliza === , o JavaScript não converte tipos e verifica a igualdade dos valores, sem truques:
2 === 2;
=> true
1 === "1";
=> false
0 === [];
=> false
0 === "";
=> falseA menos que você tenha um motivo realmente bom para usar o operador de equivalência, use sempre === para evitar que erros
<script src='javascripts/rodus.js' type='text/javascript'></script><!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script src='javascripts/rodus.js' type='text/javascript'></script>
<title>CAP 3 - Adicinado JS</title>
</head>
<body>
<table>
<tbody>
<tr class="produto">
<td>
<div class="price">R$ 29,90</div>
</td>
<td>
<input type="number" class="quantity">
</td>
</tr>
<tr class="produto">
<td>
<div class="price">R$ 59,90</div>
</td>
<td>
<input type="number" class="quantity">
</td>
</tr>
<tr class="produto">
<td>
<div class="price">R$ 99,90</div>
</td>
<td>
<input type="number" class="quantity">
</td>
</tr>
</tbody>
<tr>
<td></td>
<td>Total da compra</td>
<td>
<div id="total">R$ 189,70</div>
</td>
<td></td>
</tr>
</table>
</body>
</html>//var total = document.getElementById("total");
//alert(total.innerHTML);
//var total = document.getElementById("total");
//var formattedtext = floatToMoneyText(moneyTxtFLoat(total.innerHTML));
//alert(formattedtext === total.innerHTML); // true
function moneyTxtFLoat(text) {
var cleanText = text.replace("R$ ", "").replace(",", ".");
return parseFloat(cleanText);
}
function floatToMoneyText(value) {
var text = (value < 1 ? "0" : "") + Math.floor(value * 100);
text = "R$ " + text;
return text.substr(0, text.length - 2) + "," + text.substr(-2);
}
function readTotal() {
var total = document.getElementById("total");
return moneyTxtFLoat(total.innerHTML);
}
// 3.6 ALTERANDO O CAMPO DO TOTAL
function writeTotal(value) {
var total = document.getElementById("total");
total.innerHTML = floatToMoneyText(value);
}
//writeTotal(3.143302);
/* var produtos = document.getElementsByClassName("produto");
console.log(produtos);
for(var pos = 0; pos < produtos.length; pos++) {
var priceElements = produtos[pos].getElementsByClassName("price");
var priceText = priceElements[0].innerHTML;
var price = moneyTxtFLoat(priceText);
console.log(price);
} */
function calculateTotalProducts() {
var produtos = document.getElementsByClassName("produto");
var totalProdutos = 0;
for (var pos = 0; pos < produtos.length; pos++) {
var priceElements = produtos[pos].getElementsByClassName("price");
var priceText = priceElements[0].innerHTML;
var price = moneyTextToFloat(priceText);
var qtyElements = produtos[pos].getElementsByClassName("quantity");
var qtyText = qtyElements[0].value;
var quantity = moneyTextToFloat(qtyText);
var subtotal = quantity * price;
totalProdutos += subtotal;
}
return totalProdutos;
}function quantidadeMudou() {
writeTotal(calculateTotalProducts());
}
function onDocumentoLoad() {
var textEdits = document.getElementsByClassName("quantity");
for(var i = 0; i < textEdits.length; i++) {
textEdits[i].onchange = quantidadeMudou;
}
}
window.onload = onDocumentoLoad;if (document.getElementsByClassName == undefined) {
alert("getElementsByClassName not found");
document.getElementsByClassName = function(className) {
alert("Regozijai-vos, usuários de Internet Explorer");
}
}
var todosElementos = document.getElementsByTagName("*");
var resultados = [];
var elemento;
for (var i = 0; (elemento = todosElementos[i]) != null; i++) {
var elementoClass = elemento.className;
if (elementoClass &&elementoClass.indexOf(className) != -1) {
resultados.push(elemento);
}
}
return resultados;- 03-AdicionandoJavaScript/javascripts/rodus.js
/*
function quantidadeMudou() {
writeTotal(calculateTotalProducts());
}
function onDocumentoLoad() {
var textEdits = document.getElementsByClassName("quantity");
for(var i = 0; i < textEdits.length; i++) {
textEdits[i].onchange = quantidadeMudou;
}
}
*/
function onDocumentoLoad() {
var textEdits = document.getElementsByClassName("quantity");
for(var i = 0; i < textEdits.length ; i++){
textEdits[i].onchange = function () {
writeTotal(calculateTotalProducts());
}
}
}
window.onload = onDocumentoLoad;function() {
console.log("Nunca serei executado :'( ")
}
var olaMundo = function() {
console.log("Serei executado =D");
}
olaMundo();function quantidadeMudou() {
writeTotal(calculateTotalProducts());
}
function onDocumentLoad() {
var textEdits = document.getElementsByClassName("quantity");
for(var i = 0; i < texts.length; i++) {
textEdits[i].onchange = quantidadeMudou;
}
}Melhorando:
function onDocumentLoad() {
var textEdits = document.getElementsByClassName("quantity");
for(var i = 0; i < texts.length; i++) {
textEdits[i].onchange = function() {
writeTotal(calculateTotalProducts());
};
}
}- 5.3 ENTENDA JQUERY EM CINCO MINUTOS
<!doctype html>
<html lang="pt_BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>5 - Simplifique com jQuery</title>
</head>
<body>
<p class="par">Primeira linha</p>
<p class="impar">Segunda linha</p>
<input type="text" id="texto" class="par" value="um texto qualquer">
<script type="application/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("p").css("background-color", "lightgreen");
$(".par").css("background-color", "lightblue");
$("#texto").css("color","white").val("ESSE É O NOVO TEXTO");
</script>
</body>
</html>- Inicial:
<!doctype html>
<html lang="pt_Br">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>6 DOMINANDO EVENTOS E MANIPULAÇÃO DE DOM COM JQUERY</title>
</head>
<body>
<h2>TODO List</h2>
<input type="text" id="tarefa">
<div id="tarefa-lista">
<div class="tarefa-item">
<div class="tarefa-texto">Comprar pão</div>
<div class="tarefa-delete"></div>
<div class="clear"></div>
</div>
</div>
<script type="application/javascript" src="js/jquery-3.3.1.min.js"></script>
<script>
$("#tarefa").off(); // retirar os eventos associados ao elemento
$("#tarefa").keydown(function (event) {
//console.log(event.which, String.fromCharCode(event.which));
if(event.which === 13) {
console.log("AQUI VAMOS ADD UMA TARAFA");
}
})
</script>
</body>
</html>$("#tarefa").off("keydown.primeiro", function() { //.on ou .off
console.log("Esse é o primeiro evento");
});
$("#tarefa").on("keydown.segundo", function() {
console.log("Esse é o segundo evento");
});$(function(){
/* 6.4 REMOVENDO ITENS COM ESTILO */
function onTarefaDeleClick() {
//console.log($(this).parent('.tarefa-item').text().trim());
$(this).parent('.tarefa-item').hide('slow', function () {
$(this).remove();
});
}
$('.tarefa-delete').click(onTarefaDeleClick);
});var servico = "http://livro-capitulo07.herokuapp.com/hello";
$.get(servico, function(data) {
alert(data);
});var parametros = {nome: "Caro Leitor"};
var servico = "http://livro-capitulo07.herokuapp.com/hello";
$.get(servico, parametros, function(data) {
alert(data);
});"esse objeto pode intermediar e controlar toda a conversação entre o seu código JavaScript e o servidor que vai nos fornecer os dados."
"O objeto jqXHR permite que sejam definidos callbacks para quando a requisição correu bem e para quando houve algum erro."
var parametros = {nome: "Caro Leitor"};
var servico = "http://livro-capitulo07.herokuapp.com/hello";
var $xhr = $.get(servico, parametros);
$xhr.done(function(data) {
alert(data);
});melhorando...
var parametros = {nome: "Caro Leitor"};
var servico = "http://livro-capitulo07.herokuapp.com/hello";
$.get(servico, parametros)
.done(function(data) {
alert(data);
});Erro proposital
var servico = "http://livro-capitulo07.herokuapp.com/error";
$.get(servico)
.fail(function(data) {
alert(data.responseText);
});Lista de códigos de estado HTTP: https://pt.wikipedia.org/wiki/Lista_de_c%C3%B3digos_de_estado_HTTP
var servico = "http://api.postmon.com.br/v1/cep/";
var cep = "04101-300";
function onCepDone(data) {
console.log("A Casa do Código fica na " + data.logradouro);
}
$.getJSON(servico + cep)
.done(onCepDone);Com Erro:
var servico = "http://api.postmon.com.br/v1/cep/";
var cep = "12345-789";
function onCepDone(data) {
console.log("A Casa do Código fica na " + data.logradouro);
}
function onCepError(error) {
console.log("Erro: " + error.statusText)
};
$.getJSON(servico + cep)
.done(onCepDone)
.fail(onCepError);Problemas com CORS
A primeira é chamada de Cross-Origin Resource Sharing, e é habilitada quando o servidor que está nos fornecendo os dados insere o cabeçalho Access-Control-Allow-Origin: * na resposta HTTP. Essa é a forma mais limpa e padronizada de acessarmos outro domínio usando AJAX, mas tem uma série de problemas e limitações. A maior delas, sem dúvida, é quando estamos acessando um servidor que não inclui esse cabeçalho na resposta
--disable-web-security CHROME