Como colocar jQuery num blogue

Hoje não me apetece escrever muito, por isso vou mostrar como colocar uma Biblioteca de Javascript no blogue.

Eu utilizo o javascript e a biblioteca jQuery, por isso é sobre essa que vou falar mas o método é similar para qualquer uma que queiram utilizar.

Primeiro, uma pequena introdução sobre javascript e o que são Bibliotecas de Javascript: Javascript é uma linguagem para desenvolvimento de websites (incluindo o Blogger) que funciona em conjunto com HTML e CSS, e serve em muitos casos para criar certos efeitos ou inserir determinadas funcionalidades.
Dou como exemplo no Blogger, na secção dos comentários incorporados, que necessita de javascript para funcionar.

Embora actualmente muitos dos efeitos que se obtém com javascript poderem ser duplicados em versões recentes de CSS, o javascript continua a ser parte importante ao criar/desenhar um site ou blogue.

Existe a linguagem pura de javascript e depois existem as Bibliotecas de Javascript, que são nada mais que estruturas que oferecem melhoramentos à linguagem pura para permitir mais facilidade em escrever novos códigos utilizando determinada Biblioteca como base.
Como é lógico, um código escrito para uma determinada Biblioteca não funciona a menos que se incluía a dita cuja no blogue.

Abaixo estão algumas das Bibliotecas de Javascript mais conhecidas:

1. jQuery

   Esta deve ser a mais utilizada e uma das mais conhecidas pela sua facilidade na escrita de novos códigos e pelos efeitos que permite criar.
   Muitas vezes é utilizada em conjunto com a jQuery UI para tornar certos efeitos visuais mais apelativos.

2. Prototype & script.aculo.us

   Geralmente utilizadas em conjunto, na maioria dos blogues que as utilizam, estas duas Bibliotecas facilitam a criação de efeitos visuais.

3. MooTools

   Biblioteca mais compacta e direccionada a lidar com alterações "dentro do motor", era muito utilizada em alguns modelos clássicos do Blogger.
   Actualmente, uma grande parte dos criadores de modelos e/ou blogueiros raramente a utiliza embora ainda se encontre em muitos sites/blogues.

4. Modernizr

   Uma Biblioteca para facilitar a apresentação de HTML5 & CSS3.
   Simplificando a coisa, é um pequeno trecho de código JavaScript que detecta automaticamente a disponibilidade de tecnologias web de última geração nos navegadores dos seus utilizadores, e caso necessário, apresenta a página o mais próximo do originalmente idealizado.

5. Node.js

   Permite executar código javascript em ambientes que não são navegadores web e funciona em vários sistemas operacionais.

6. Angular

   Ainda é utilizado por alguns desenvolvedores por ser considerado ideal para construir aplicações de página única (SPA).
   Angular é uma estrutura web que capacita os programadores para criar aplicações rápidas e fiáveis.

7. Vue.js

   Uma estrutura acessível, de alto desempenho e versátil para criar interfaces de utilizador.

8. React

   É uma biblioteca usada para criar interfaces de utilizador (UI) em aplicações web.
   É uma ferramenta muito popular e conhecida por sua eficiência na actualização de elementos da interface sem recarregar a página toda

É provável que existam mais Bibliotecas de Javascript, mas da maior parte delas nunca ouvi falar antes de pesquisar para escrever este artigo, por isso nem as vou nomear...
Chamo a atenção que estas Bibliotecas de Javascript (Jquery, Mootools, etc...) podem provocar conflitos se utilizares mais do que uma delas em simultâneo.
Até com diferentes versões da mesma Biblioteca, podem acontecer conflitos.

Então, e para irmos ao assunto do artigo, como podemos colocar o Jquery no blogue?

Existem duas (2) maneiras de o fazer:

1. Descarregar a biblioteca jQquery e alojar num servidor próprio
   Utilizando este método, precisas descarregar a versão do jQquery que pretendes para o teu computador, depois alojar esse ficheiro num servidor próprio ou num qualquer site de alojamento que aceite ficheiros .js, e então colocar essa ligação no blogue...
2. Utilizando uma CDN (Content Delivery Network ou Rede de Entrega de Conteúdo)
   Neste método, podes adicionar o jQquery no teu blogue a partir de uma Rede de Distribuição de Conteúdo, tipo dos servidores da Google ou até do próprio site do Jquery.

Então vamos a Tema, clicamos na seta do botão Personalizar e escolhemos a opção Editar HTML para abrir o Editor de HTML procura por </head> e logo acima, colocas uma das seguintes opções:

1. Vamos assumir que já descarregaste a versão do jQquery pretendida, e que já a alojaste num servidor à tua escolha, e que já tens o necessário endereço URL para a instalação no teu blogue...
   Colocas o jQquery no teu blogue da seguinte maneira:
   ver código

   imprimir?

   1	<script type="text/javascript" src="endereço-url-do-teu-ficheiro-jquery.js"></script>

   2

   </head>

2. Com esta maneira, vamos assumir que pretendes servir-te de um dos vários servidores que alojam o jQquery na net, através de uma das ligações abaixo:
   • jQquery CDN
     Aqui temos duas opções, podemos linkar uma versão escolhida, digamos que é a 3.7.1:
     ver código

     imprimir?

     1	<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>

     2

     </head>

     Mas também podemos colocar da seguinte forma para termos sempre a última versão actualizada:
     ver código

     imprimir?

     1	<script src="https://code.jquery.com/jquery-latest.js"></script>

     2

     </head>

     Atenção que às vezes a última versão nem sembre é estável, além de que existem certos scripts que dependem de determinadas versões para funcionar e podem deixar de o fazer em qualquer momento colocando o jQuery sempre actualizado na última versão.

   • Google CDN
     Mais uma vez tomando como exemplo a versão 3.7.1 (Caso desejem alterar a versão, podem só alterar esse número, mas se o fizerem, recomendo que testem a ligação), utilizando os servidores da Google deve ficar assim:
     ver código

     imprimir?

     1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

     2

     </head>

   • Cloudflare CDN
     De novo usando como exemplo a versão 3.7.1, hospedada nos servidores da Cloudflare que deve ficar assim:
     ver código

     imprimir?

     1	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js" integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

     2

     </head>

   • Microsoft Ajax CDN
     Novamente usando como exemplo a versão 3.7.1, e mais uma vez utilizando os servidores da Microsoft deve ficar assim:
     ver código

     imprimir?

     1	<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.7.1.min.js"></script>

     2

     </head>

Existem tanto vantagens, como desvantagens em qualquer dos métodos descritos acima.
Cabe a cada um analisar qual se adapta melhor a cada necessidade.

No entanto, eu prefiro puxar o script dos servidores do Google porque convenhamos, se o Google ir abaixo, o mesmo irá acontecer com o meu blogue.

Lembro que qualquer que seja a Bibliotecas de Javascript da vossa escolha, QUE DEVE ser colocada SEMPRE ANTES de quaisquer códigos que dependam dessa Biblioteca.
Outra coisa a ter atenção são os possíveis conflitos que podem originar de existirem no mesmo HTML múltiplas versões da mesma Biblioteca, embora neste caso exista uma maneira de resolver os conflitos.
E finalmente, uma palavra de prevenção para que evitem ao máximo instalar mais do uma Biblioteca, já que isso é praticamente certo que irá causar conflitos.

E por hoje é tudo.

Até Breve.

Queres ler outro artigo ao calhas?