Olá! Saturday, 15 de March de 2025.



Dicas CódigoFonte.net
Friday, 08 de January de 2010

Função com Parâmetro

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.


Enviado por: Andre

Comentários do artigo [Novo comentário]

Nenhum comentário, seja o primeiro a comentar.
Para adicionar um comentário você deve efetuar o login


Gostou do CódigoFonte.net? Quer indicar a um amigo?
Preencha os campos a seguir.
Seu Nome:
Seu E-mail:
E-mail de seu Amigo:


CodigoFonte.net » Meu Mural » Competiva - Criação de Sites » Todos os Direitos Reservados © 2002/2010