JavaScript é uma linguagem de programação que é executada do lado do navegador do usuário, não do lado do servidor, como é o caso em diversas outras linguagens de programação. E essa programação do lado do cliente permite que os desenvolvedores façam um monte de coisas legais com o navegador respondendo a tais coisas rapidamente, fazendo uma aplicação mais responsiva e detectando ações do usuário que a HTML sozinha não pode.
No WordPress, cada post pode conter diversos tipos de elementos: imagens, vídeos, trechos de códigos e texto, é claro. Além desses, é possível inserir códigos JavaScript direto na postagem. Para isso, ao criar ou editar um post, basta adicionar um novo bloco do tipo HTML personalizado e inserir o código.
A seguir, é possível observar um trecho de código JavaScript que é usado para carregar uma janela de alerta. Você pode inserir ele em um post para testar.
<script>
window.alert("Clique em ok!")
</script>
O exemplo abaixo ilustra um código em funcionamento inserido dentro desta postagem no WordPress. Faça o teste!
A seguir, você pode ver o código completo do exemplo anterior, as classes de estilos e outros detalhes são devido a utilização do Bootstrap, mas você pode ignorar essa parte e testar em casa a parte principal, que é o JavaScript. 🙂
<form action="" method="post">
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Número 1</span>
</div>
<input type="text" class="form-control" id="n1" value="5">
</div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">Número 2</span>
</div>
<input type="text" class="form-control" id="n2" value="3">
</div>
</form>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-primary" type="button" onclick="somar()">clique aqui para somar</button>
</div>
<input type="text" class="form-control" id="resultado">
</div>
<script>
function somar() {
var n1 = parseInt(document.getElementById('n1').value, 10);
var n2 = parseInt(document.getElementById('n2').value, 10);
document.getElementById('resultado').value = n1 + n2;
}
</script>
É simples, não é?
Caso queira ver mais sobre o assunto, acesse:
– https://salvadorwp.bid/como-adicionar-javascript-paginas-posts-2-metodos/
– https://www.javascript.com/
– https://www.w3schools.com/js/