Eu te peço um pouco de paciência, porque isso aqui é legal.
A terceira coisa é o Loop, mas antes eu vou falar da quarta, que se chama
função, ou, em algumas linguagens, método. Eu vou chamar de função.
Você deve ter percebido que um programa de computador é como uma máquina que
você constrói com palavras e símbolos para obter um certo resultado.
Pois bem, uma função é uma maquininha dentro da máquina.
Quarta Coisa
Vamos fazer um novo html igual o de ontem, chamar de qualquer coisa, e criar um
novo arquivo javascript. Só não esqueça que tem que ser alguma coisa ponto js (
.js ) , tem que estar na mesma pasta e tem que ter o nome desse novo arquivo JS
no html, aqui:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="aqui vai o nome do arquivo .js, entre aspas"></script>
<title>O título da aba</title>
<head>
<body>
<h1> O texto maior </h1>
<p>
O páragrafo, ou texto menor.
</p>
<body>
</html>
Certo, e o que vamos colocar no arquivo JS?
Isso:
window.onload = function() {
window.console.log("eu sou uma função");
}
Abra o html pelo explorer e aperte F12. Viu?
Window.onload é uma função que o browser chama quando a página é aberta. Uma
maquininha dentro da máquina. Agora, dentro dessa maquininha vamos chamar
outras.
window.onload = function() {
lavar("cabelo");
escovar("cabelo");
escovar("dente");
}
Salve e abra o html de novo e aperte F12.
Deu erro, porque a gente não definiu essas funções, essas maquininhas, como a
gente definiu window.onload. Vamos definir.
Mantenha a função window.onload como está e escreva abaixo:
lavar = function(entrada) {
window.console.log("Estou lavando meu " + entrada);
}
Entrada é o que você colocar na máquina, o parâmetro da função. Tanto que vamos
definir a função escovar assim:
escovar = function(entrada) {
window.console.log("Estou escovando meu " + entrada);
}
E, como estamos passando parâmetros diferentes, o resultado vai ser diferente.
Abra o arquivo de novo e aperte F12.
Viu?
Seguindo as regras do Shampoo
Agora vamos trabalhar dentro da função lavar(“cabelo”), seguindo as instruções
do shampoo. Vamos apagar o que está dentro dela e deixar ela assim:
lavar = function(entrada) {
molhar(entrada);
aplicar("Shampoo");
enxaguar(entrada);
repetir();
}
Perceba que o que a gente passar como entrada pra função lavar, ela vai passar
como entrada para as funções que estão dentro dela.
Agora, vamos criar essas novas maquininhas. Embaixo de tudo que você escreveu,
complete assim:
molhar = function(entrada) {
window.console.log("Estou molhando meu " + entrada);
}
aplicar = function(entrada) {
window.console.log("Estou aplicando o " + entrada);
}
enxaguar = function(entrada) {
window.console.log("Estou enxaguando meu " + entrada);
}
Certo, e a função repetir? Vamos declarar ela assim:
repetir = function() {
lavar("cabelo");
}
Quando a gente deixa os parênteses em function() vazios, significa que essa função
não precisa de entrada.
Agora rode a página de novo e aperte F12.
Viu? O computador deu meio que um bug, porque a gente mandou ele lavar o cabelo
pra sempre. Ele entrou em um Loop.
Terceira Coisa
Mas as pessoas do shampoo perceberam que não é justo deixar a gente lavando o
cabelo eternamente, então depois do “repetir”, eles adicionaram: “se
necessário”.
Também podemos fazer algo assim para tirar nosso programa de seu loop infinito.
E para isso vamos usar a linguagem que aprendemos em nossa aula passada, o
condicional (“if”):
lavar = function(entrada) {
molhar(entrada);
aplicar("Shampoo");
enxaguar(entrada);
if ( necessario() ) {
repetir();
}
}
A função necessario() vai ser uma maquininha que responde sim ou não.
Antes de criar ela, vamos declarar uma variável global. É uma variável que é
iniciada fora da função. Se a gente declara uma variável dentro da função, ela
vai funcionar só dentro da função e nas funções que estão dentro dessa função,
e não nas funções que estão “acima” ou no programa como um todo.
Então vai lá em cima de tudo, antes mesmo da função window.onload() e escreva:
var limpeza = 0;
É a variável que nos diz quanto porcento do cabelo está limpo.
Vamos adicionar a seguinte linha à função lavar(entrada):
lavar = function(entrada) {
molhar(entrada);
aplicar("Shampoo");
enxaguar(entrada);
limpeza = limpeza + 20;
if ( necessario() ) {
repetir();
}
}
Frase estranha? A gente não está afirmando que limpeza, no momento, é igual
limpeza mais 20, o que seria mesmo esquisito, a gente está dando um novo valor
pra ela: a partir de agora, “limpeza” vai ser igual o valor atual de “limpeza”
mais 20. Se era 0, agora é 20, se era 20, agora é 40, e assim por diante.
Agora vamos criar a função necessario(), lá embaixo:
necessario = function() {
return ( limpeza < 100 );
}
Ela vai retornar um sim ou não. Ela vai retornar a resposta da pergunta:
limpeza é menor que 100? “<” significa menor.
Assim, a cada volta do loop, ele aumenta a limpeza em 20 e checa se o valor
ainda está menor que 100.
Agora rode a página. Viu? Ele sabe que a cada lavada, a limpeza aumentou em 20
porcento. Então só lavou 5 vezes. Já é alguma coisa.
Um jeito melhor de fazer um Loop
Mas essa não é a maneira mais prática de fazer um loop. A gente pode apagar a
função necessário() e deixar a função lavar() assim:
lavar = function(entrada) {
while (limpeza < 100) {
molhar(entrada);
aplicar("Shampoo");
enxaguar(entrada);
limpeza = limpeza + 50;
}
}
“While”. “Enquanto”. É uma expressão que nos diz simplesmente que, enquanto
limpeza for menor que 100, devemos ficar repetindo tudo o que está entre os {
}.
Na verdade, a gente pode até tirar a variável limpeza do seu nível global
(apagar a parte em que declaramos ela lá em cima), e usar ela dentro da função
lavar mesmo:
lavar = function(entrada) {
var limpeza = 0;
while (limpeza < 100) {
molhar(entrada);
aplicar("Shampoo");
enxaguar(entrada);
limpeza = limpeza + 50;
}
}
Pronto. Rode a página. Eu mudei o número de 20 para 50. Agora ele lava o cabelo
duas vezes. Está bom. Se é que precisa mesmo.
Até a próxima, vamos falar um pouco mais de loops.
