Aprenderemos hoje como passar parâmetro através da função. A sintaxe geral é:
[quote]
function nome-da-função(parâmetros) {
comandos
}
[/quote]
Abaixo temos dois exemplos simples, o primeiro utilizando número inteiro e outro string.
[code]
<script>
function exemplo1(idade) {
alert("Você tem " + idade + " anos.");
}
</script>
<body>
Primeiro exemplo utilizando número inteiro como parâmetro.
<script>exemplo1(21)</script>
</body>
[/code]
[code]
<script>
function exemplo2(cidade) {
alert("Você mora em " + cidade);
}
</script>
<body>
Segundo exemplo utilizando String como parâmetro.
<script>exemplo2("Rio Claro")</script>
</body>
[/code]
Nota: Quando utilizamos string como parâmetro devemos utilizar aspas dupla (") ou simples (') na hora de executar a nossa função,
como no exemplo: exemplo2("Rio Claro").
Podemos definir parâmetro como uma variável, para visualizar está "variável" utiliza-se o nome que demos a ela. No
primeiro exemplo, o nome do parâmetro é idade e no segundo exemplo é cidade e para
visualizarmos chamamos está variável, como no primeiro exemplo : alert("Você mora em " + cidade);
Atenção: Parâmetro é uma variável local!
Você pode usar quantos parâmetros desejar, basta separar cada parâmetro por vírgula, veja o exemplo abaixo:
[code]
<script>
function exemplo3(nome,idade,cidade) {
document.write("Nome: " + nome + "<br>");
document.write("Idade: " + idade + "<br>");
document.write("Cidade: " + cidade + "<br>");
}
</script>
<body>
Terceiro exemplo utilizando vários parâmetros.<br>
<script>exemplo3("André",21,"Rio Claro")</script>
</body>
[/code]
Agora vamos ver como o parâmetro simplifica e facilita, usaremos no
próximo exemplo o parâmetro id:
[code]
<script>
function exemplo4(op) {
document.getElementById("testedemesa").innerHTML = "Você clicou no botão: " + op;
}
</script>
<body>
<input type="button" id="botao1" value="botao1" onclick="exemplo4(id);">
<input type="button" id="botao2" value="botao2" onclick="exemplo4(id);">
<input type="button" id="botao3" value="botao3" onclick="exemplo4(id);">
<p><div id="testedemesa">Teste de Mesa</div></p>
</body>
[/code]
Nota: Observe que os parâmetros estão diferentes, para chamar a função exemplo4(id) e no function está exemplo4(op). Isto é, estamos mandando para a função o valor id do botão, por isso colocamos, exemplo4(id).
Já no function, recebe o valor do id e armazena no parâmetro op (Lembra
que o parâmetro é uma variável?). Você poderia ao invés de utilizar o
parâmetro op usar id, pois esse id seria uma variável (um parâmetro) e
não teria o valor id do botão.
Para finalizar este artigo, vamos fazer um menu com método de mostrar e esconder div's:
[code]
<script>
function exemplo5(link) {
document.getElementById('pagina').innerHTML=document.getElementById(link).innerHTML;
}
function carrega() {
document.getElementById('pagina').innerHTML=document.getElementById('home').innerHTML;
}
</script>
<body onload="carrega();">
<a href="javascript:exemplo5('home');"> Home</a> -
<a href="javascript:exemplo5('link1');"> Link1</a> -
<a href="javascript:exemplo5('link2');"> Link2</a> -
<a href="javascript:exemplo5('link3');"> Link3</a> -
<a href="javascript:exemplo5('link4');"> Link4</a>
<p>
<div id="pagina"></div>
<div id="home" style="display:none;">Corpo da Página</div>
<div id="link1" style="display:none;">Conteúdo do Link 1</div>
<div id="link2" style="display:none;">Conteúdo do Link 2</div>
<div id="link3" style="display:none;">Conteúdo do Link 3</div>
<div id="link4" style="display:none;">Conteúdo do Link 4</div>
</p>
<body>
[/code]
Até a próxima.