jQuery foi feito pra descabelar o sujeito? [RESOLVIDO] [Duvidas frequentes]

1. jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Enviado em 02/01/2024 - 23:22h

Eu costumo programar mais em C++ do que em javascript, dai hoje vendo aqui um exemplo em html fui cair na besteira de testar e então passei minutos me divertindo com jquery até o meu exemplo ficar mais complexo e os comandos do jquery falhar silenciosamente.

Até ai tudo bem, pode ser que meu código esteja todo errado, mas não e'o caso. O que acontece é que não encontrei um modo eficaz de debugar essa bagaça.
Porque tipo:
--se eu coloco errado o id de um elemento, não é mostrado absolutamente nenhuma mensagem de erro.
--pesquisei aqui até cansar e não encontrei ninguém debugando código com jquery de forma "profissional",
mas tudo que vi foi gambiarras do tipo alert("amigo estou aqui!")

Não tem uma forma de fazer algo como: $.on('error', (info)=>{})?
Dai passa onde foi o erro e eu só tenho o trabalho de ver a informação.

Ou essa lib é feita pra descabelar o palhaço que eu sou? Eu, cara de xibiu?

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

2. Re: jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Melhor resposta

Enviado em 03/01/2024 - 07:57h

Samuel, deixe o jQuery descansar em paz, por favor! jQuery é coisa do passado! rsrs

Muitas features dele já foram implementadas nativamente no JavaScript. Se precisar de algo mais robusto, existem libs e frameworks em Node.js como React/Next, Angular, e Vue.js, que eu diria que vale muito mais a pena estudar.

jQuery surgiu em uma época onde o JavaScript puro era muito imaturo ainda, faltava muitos recursos úteis e era necessário utilizar libs externas.

se eu coloco errado o id de um elemento, não é mostrado absolutamente nenhuma mensagem de erro.

Isso ocorre no JavaScript mesmo, rs! Mas se você associar um evento a um ID inexistente, ele deve retornar null, como por exemplo:

const id = document.querySelector('#eunaoexisto')

console.log(id)

null

Ai seria questão de tratar com if, etc, para validação.

--pesquisei aqui até cansar e não encontrei ninguém debugando código com jquery de forma "profissional",

Acho que tu precisa colocar um filtro no Google, para pegar links de 2006 até 2016 mais ou menos rsrs. Como dito, hoje em dia JavaScript "profissional" é com as libs e frameworks citados, nesses há recursos de debugs mais sofisticados.

Não tem uma forma de fazer algo como: $.on('error', (info)=>{})?

Quando eu utilizava jQuery, o debug era "na unha" mesmo, semelhante ao alert que tu exemplificou. Mas alguns recursos como chamada AJAX tinha fluxos para tomar ações quando houvesse erros, mas não sei se existe algo global como no seu exemplo.

No JavaScript puro, existe um listen para eventos de erro:
https://developer.mozilla.org/en-US/docs/Web/API/Window/error_event

Nesse você consegue associar com algum elemento na tela.

Ou essa lib é feita pra descabelar o palhaço que eu sou? Eu, cara de xibiu?

jQuery sempre foi esquisito, rs! Ainda bem que hoje em dia existem opções melhores e mais profissionais. Mas jQuery ainda é utilizado em muitos sistemas legados...

3. Re: jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Enviado em 03/01/2024 - 09:43h

@SamL, você usou o termo "descabelar o palhaço" de modo errado, hehehe... Esse termo é o mesmo que "afogar o ganso", "repartir a peruca", "entortar a gaiola", enfim, trepar, hehehehe...

Vejam meu canal no Youtube: https://www.youtube.com/@SidneiSerra-hq1zk
Se conseguiu resolver a sua dúvida, premie os usuários do fórum que doam seu tempo para tirar dúvidas marcando a melhor resposta.

4. Re: jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Enviado em 03/01/2024 - 09:53h

Nas ferramentas de desenvolvimento de navegadores como chrome, edge, firefox tem as ferramentas de desenvolvimento. Lá vc consegue logar as mensagem e também consegue colocar breakpoints p acompanhar a execução. Eu mesmo já usei mas sineramente acho mais prático colocar um alert(...) mesmo kkkk
Esses dias voltei pro jquery p fazer um trabalho e também apanhei. Os métodos tinham mudado e, como o colega citou acima, muita funcionalidade foi absorvida nativamente.

5. Re: jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Enviado em 03/01/2024 - 15:41h

@tipoff
Valeu a explicação cara, nem sabia que jquery já é tão antigo.
Tudo que eu preciso dele é apenas animar elementos, tipo, o método $(elementoID).animate()
Não quis recriar do zero porque eu quis economizar trabalho.

Tu conhece alguma lib que seja específica pra isso? Digo, pra animar elementos por javascript/css?

@velox256
É que não tinha outro modo de expressar que essa lib tava me f0dendo, figurativamente que eu sou um xibiu, me chama de Xibilson por favor. rsrsrs

@leandropscardua
hahaha as vezes pode ser bom colocar um alert, o problema é que cansa muito e como cansa!
Descobri que hoje tem uma palavra chave no JS pra dar um "break" quando chegar ali, é o debugger;

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

6. Re: jQuery foi feito pra descabelar o sujeito?

Enviado em 03/01/2024 - 19:54h

@SamL

Hoje em dia o CSS possui recursos de animação nativo. Dependendo do que você quer fazer, nem precisaria usar JavaScript.

Montei um exemplo bem pobre aqui para mostrar como fazer animação usando JS puro e CSS:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>

      body {

        margin-top: 50px;

      }



      p {

        width: 100px;

        height: 100px;

        background-color: red;

        border-radius: 5px;

        color: white;

        text-align: center;

        line-height: 100px;

        margin: 0 auto;

        cursor: pointer;

      }



      .fadeIn {

        animation: fadeIn 1s;

      }



      .fadeOut {

        animation: fadeOut 1s;

      }



      @keyframes fadeIn {

        0% {

          opacity: 0;

        }

        100% {

          opacity: 1;

        }

      }



      @keyframes fadeOut {

        0% {

          opacity: 1;

        }

        100% {

          opacity: 0;

        }

      }

    </style>

  </head>

  <body>

    <p class="fadeIn">Hello, World!</p>

  </body>

  <script>

    const element = document.querySelector("p");



    element.addEventListener("click", () => {

      element.className = "fadeOut";

      setTimeout(() => {

        element.style.display = "none";

      }, 1000);

    });

  </script>

</html>

Criei duas classes CSS: fadeIn e fadeOut. FadeIn é utilizado assim que a página é carregada, e o FadeOut é adicionado após o usuário clicar no elemento da tela. Após o clique, o elemento é ocultado adicionando o atributo display = none após 1 segundo.

Dá para brincar com várias outras animações nativas do CSS. De lib, eu só conheço mesmo em React, que aliás é bem mais fácil de se trabalhar com animações.

Tem libs para usar com JS puro, mas confesso que nunca usei nenhuma:
https://www.codeinwp.com/blog/best-javascript-animation-libraries/

edit: a threejs já ouvi falar muito bem, inclusive é utilizada para fazer animações mais complexas...

7. Re: jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Enviado em 03/01/2024 - 20:13h

tipoff escreveu:

@SamL

Hoje em dia o CSS possui recursos de animação nativo. Dependendo do que você quer fazer, nem precisaria usar JavaScript.

Montei um exemplo bem pobre aqui para mostrar como fazer animação usando JS puro e CSS:

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <style>

      body {

        margin-top: 50px;

      }



      p {

        width: 100px;

        height: 100px;

        background-color: red;

        border-radius: 5px;

        color: white;

        text-align: center;

        line-height: 100px;

        margin: 0 auto;

        cursor: pointer;

      }



      .fadeIn {

        animation: fadeIn 1s;

      }



      .fadeOut {

        animation: fadeOut 1s;

      }



      @keyframes fadeIn {

        0% {

          opacity: 0;

        }

        100% {

          opacity: 1;

        }

      }



      @keyframes fadeOut {

        0% {

          opacity: 1;

        }

        100% {

          opacity: 0;

        }

      }

    </style>

  </head>

  <body>

    <p class="fadeIn">Hello, World!</p>

  </body>

  <script>

    const element = document.querySelector("p");



    element.addEventListener("click", () => {

      element.className = "fadeOut";

      setTimeout(() => {

        element.style.display = "none";

      }, 1000);

    });

  </script>

</html>

Criei duas classes CSS: fadeIn e fadeOut. FadeIn é utilizado assim que a página é carregada, e o FadeOut é adicionado após o usuário clicar no elemento da tela. Após o clique, o elemento é ocultado adicionando o atributo display = none após 1 segundo.

Dá para brincar com várias outras animações nativas do CSS. De lib, eu só conheço mesmo em React, que aliás é bem mais fácil de se trabalhar com animações.

Tem libs para usar com JS puro, mas confesso que nunca usei nenhuma:
https://www.codeinwp.com/blog/best-javascript-animation-libraries/

edit: a threejs já ouvi falar muito bem, inclusive é utilizada para fazer animações mais complexas...

Valeu ai o esforço cara, dá pra ver que tu é uma pessoa gente fina.

Eu tinha procurado aqui uma lib para animar elementos, mas eu vi que é muito pro que quero fazer, dai resolvi fazer na mão aqui pra aprender como é.

De qualquer forma, vou estudar aqui esse teu código.

Obrigado!

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

8. Re: jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Enviado em 03/01/2024 - 20:48h

SamL escreveu:

Valeu ai o esforço cara, dá pra ver que tu é uma pessoa gente fina.

Eu tinha procurado aqui uma lib para animar elementos, mas eu vi que é muito pro que quero fazer, dai resolvi fazer na mão aqui pra aprender como é.

De qualquer forma, vou estudar aqui esse teu código.

Obrigado!

https://nerdki.blogspot.com/ acessa ai, é grátis
Não gostou? O ícone da casinha é serventia do site!

Valeu! Qualquer dúvida só chamar!

jQuery foi feito pra descabelar o sujeito? [RESOLVIDO]

Responder tópico