PHP com HTML + Javascript: Como usar e onde encontrar funções?

Foram publicados artigos que funcionam como tutoriais sobre o PHP. A nossa equipa partiu do pressuposto que as pessoas já teriam alguma base nas tecnologias de HTML e Javascript. Dado os pedidos que têm surgido, iremos explicar um pouco do funcionamento do HTML e do Javascript.

HTML + Javascript: Como usar e onde encontrar funções?

Uma das questões mais frequentes e que não perceberam foi como é que se atribui a determinado botão uma ação (por exemplo) e, neste exemplo, iremos explicá-lo em um passo muito simples.

Referências: Tutoriais PHP

Primeiro de tudo, abra um documento com o bloco de notas (por exemplo), preencha o documento com a seguinte informação e grave com a extensão “.HTML”

<html>
<head>
<title>TITULO</title>
</head>

<body>
      CONTEÚDO DA PÁGINA WEB
</body>

</html>

Agora, vamos adicionar um simples botão como contéudo:

<html>
<head>
<title>TITULO</title>
</head>

<body>
      <button>Botão</button>
</body>

</html>

Note-se que tudo isto é HTML. Agora, vamos implementar um pouco de Javascript. Para isso, no fundo da tag “HTML” vamos criar uma tag chamada “SCRIPT”:

<html>
<head>
<title>TITULO</title>
</head>

<body>
      <button>Botão</button>
</body>

</html>
< script>
	function funcao(){
		alert("CARREGASTE NO BOTAO! PARABENS!");
	}
</ script>

Para já ainda não fará nada o botão. E porque? A resposta é fácil. O Botão está criado, a função que este deve chamar também, mas nós ainda não dissemos ao botão qual a função que deve chamar. É isso que vamos fazer no próximo passo, aproveitando o evento que é despoletado quando clicamos no mesmo:

<html>
<head>
<title>TITULO</title>
</head>

<body>
      <button onclick="funcao1();">Botão</button>
</body>

</html>
< script>
	function funcao1(){
		alert("CARREGASTE NO BOTAO! PARABENS!");
	}
</ script>

O que nós fizemos foi dizer ao botão que quando alguém clica nele (onclick) ele terá de chamar a função com o nome “funcao1”. Esta por sua vez fará o que deverá fazer, apresentar um alerta com a mensagem dentro dela.

Gostou? Quer mais tutoriais sobre HTML, JAVASCRIPT e/ou PHP? Deixe-nos o seu comentário…