2c:null 2d:["$","title",null,{"children":"Loops | Guilherme Ranoya | Observable"}] 32:T5d6,Uma das coisas que os computadores são bons, e que nós não, é em repetir procedimentos inúmeras vezes de forma idêntica e sem falhas. Se há uma tarefa que precisa ser repetida muitas vezes, então ela pode ser automatizada. É para isso que servem os *loops*. Eles são processos repetitivos que podem ser parametrizados, de forma que cada repetição possa trazer pequenas mudanças pré-definidas em relação à iteração anterior. Se alguma coisa precisa ser feita múltipla e repetidas vezes, isso será resolvido no código através de um *loop*. Desenhar varias linhas coordenadas, modificar diversos valores ou textos em vários lugares diferentes em um site, deslocar vários objetos gráficos de um centro ao mesmo tempo... tudo isso, quando se tratam de vários elementos, é feito através de *loops*. Logicamente, os *loops* são ferramentas muito úteis na programação. Na maior parte das linguagens de programação há duas instruções para se construir *loops*, a instrução `for`, e a instrução `while`. As diferenças entre as duas são muito pequenas, e se dão apenas na forma como são dadas as condições para que o código permaneça no *loop*, ou siga a diante. **☞ Esta é uma questão bastante importante e que precisa de atenção: o código não continua a ser executado enquanto um loop está em andamento. Se as condições dadas para seu término nunca forem atingidas, o programa, ou a aba do navegador na qual ele está rodando, travará.*33:[] 30:{"id":"577f6eeac233dea5","slug":"livrojavascript-6","title":"Loops","thumbnail":"f0ff5e41f235097e6f80449f33bfbebc16b890c6214df2ba322109d20b0254f3","access_level":"public","create_time":"$D2024-07-11T10:48:50.924Z","update_time":"$D2025-02-05T23:36:34.532Z","view_time":null,"first_public_time":"$D2024-07-11T10:48:50.924Z","fork":{"id":"caed0fb3792da535","slug":"livrojavascript-5","title":"Condicionais","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"stars":0,"starred":false,"owner":{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024"},"version":1229,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null}],"members":[{"type":"team","id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":"starter_2024","role":"editor"},{"type":"individual","id":"92bd7310c7ec23d5","login":"ranoya","name":"Guilherme Ranoya","avatar_url":"https://avatars-next.observableusercontent.com/f2bd0349885993a7b110789aa4741bda605eb0a795d20940d586f0ced4c0f91a","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"0b9e9855c9c4f77f","slug":"livros","title":"Livros","owner":{"id":"0a78bc4380cdd0f8","login":"ranoya","name":"Guilherme Ranoya"}},"type":"notebook","body":{"title":"Loops","cells":[{"id":0,"value":"# Loops","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"### A repetição é a base da computação\n\n------\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":698,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1144,"value":"

\n\n### For\n\n---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1148,"value":"A instrução `for` é sempre mais segura para ser utilizada, já que as condições do *loop* são todas dadas inicialmente, e ficam bastante claras. Sua sintaxe exige a declaração de uma *variável* de controle para as iterações do *loop*, e uma condição que a envolva para que ele continue em andamento.\n\nA construção do for envolve três declarações e um bloco com o código a ser executado:\n\n```javascript\nfor (declaração; condição; mudança) {\n \n}\n```\n\nA primeira declaração é a definição da *variável* de controle e seu valor inicial; A segunda declaração é uma *condicional* envolvendo esta *variável*, que enquanto for `true` fará o *loop* permanecer em execução; A terceira declaração é a mudança operada sobre a *variável* de controle a cada iteração do *loop*:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1150,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1156,"value":"Neste exemplo, a *variável* de controle é `i`; a *condição* para execução do loop é que `i` seja menor que `100`; e `i` é acrescido de `10` a cada vez que o código no bloco de for for executado.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1159,"value":"Mas o que pode ser feito de interessante com um *loop*?\n\nVejamos um exemplo mais concreto:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1162,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1175,"value":"**☞ a instrução `noLoop()` na linha `21` instrui a biblioteca P5 a encerrar a *função* `draw()`, que naturalmente ficará se repetindo indefinidamente. Ela não se refere ao `for`, ou a qualquer loop do seu código.*","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1165,"value":"Experimente mudar a linha `17`, alterando a instrução `line(x,0,0,x)` para `line(x,0,0,200)`, ou para `line(x,0,0,200-x)`. O desenho será completamente diferente, mas o processo que o constrói é o mesmo, isto é, ele é construído a partir de um *loop*, onde a *variável* `x` vai de `0` a `200`, pulando de `5` em `5`, e uma linha é traçada utilizando o valor desta *variável*, que vai mudando a cada iteração do *loop*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1217,"value":"O próximo exemplo é muito parecido com o anterior, mas, neste caso, as linhas são desenhadas e redesenhadas a partir da posição do *mouse*. É como se as coordenadas do *mouse* fossem consideradas o valor `0,0` a partir do qual as diversas linhas são desenhadas uma após a outra com um espaçamento de 5 pixels. Ao contrário do código anterior, este permanece rodando indefinidamente, apagando a tela e redesenhado as linhas através do *loop* executado integralmente mais de 100 vezes por segundo (mas não se preocupe... isso é uma tarefa fácil para o computador).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1220,"value":"

","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1170,"value":"Se ao construir um código, você está repetindo a mesma instrução várias vezes, com valores um pouco diferentes, isto é sinal de que esta tarefa deveria estar sendo realizada através de um *loop*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1178,"value":"

\n\n### While\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1180,"value":"A instrução `while` faz exatamente a mesma coisa que `for`. A única diferente entre as duas é a maneira como o controle das iterações é realizado.\n\nA sintaxe de `while` recebe apenas a condição que mantém o *loop* em execução, sem que seja necessário declarar uma *variável* própria de controle, ou a mudança operada nela em cada iteração:\n\n```javascript\nwhile(condição) {\n\n}\n```\n\nSerá necessário que as mudanças às *variáveis* envolvidas na *condição* dada sejam feitas dentro do próprio bloco de `while`, do contrário você criará um *loop* infinito, que nunca se concluirá, e provavelmente travará o navegador ou a aba onde o código está sendo em execução. As chances de você esquecer de incluir mudanças nestas *variáveis* são grandes, e por isso costumamos utilizar mais `for` do que `while` para construir *loops*.\n\nAbaixo reescrevemos o primeiro código de *loop* utilizando `while`:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1183,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1188,"value":"Repare que sem a modificação sobre a *variável* `i` introduzida na linha `6`, a *condição* de `while` nunca se encerrará, e isto travará no código.\n\nO uso de `while` pode ser mais conveniente quando você desejar aproveitar os valores *variáveis* já utilizadas em algum ponto do seu código. De qualquer forma, não há nada que não possa ser escrito com `while`, que também não possa ser escrito com `for`, e vice-versa.\n\nA recomendação para aqueles que iniciam na programação é que deem preferência ao `for`, por uma questão de segurança. Mas um `for` mal elaborado também pode produzir um *loop* infinito. Isso aconteceria se o código abaixo, caso fosse executado:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1192,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1203,"value":"A linha `5`, `i=0`, manterá a *variável* de controle em um valor sempre abaixo da *condição* de execução, e isso impedirá que o *loop* seja concluído, produzindo os mesmos riscos de escrever um *loop* com `while`.\n\nEnquanto um *loop* não se concluir, nenhuma outra instrução subsequente de seu código será executada. É este o motivo pelo qual um *loop* infinito travará o contexto onde está sendo executado. Esta questão é o principal cuidado que se faz necessário ao utilizarmos *loops*.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1086,"value":"

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"