Publicação: 31/01/2019
Área:Desenvolvimento Web e Mobile
Aprendendo programação se divertindo: mexendo em páginas alheias
Em vários artigos, apresentamos a forma como a Alfamídia entende que deve ser o ensino de programação. Em resumo, nós acreditamos que as teorias devem ser ensinadas depois ou junto com a prática, nunca antes. Há várias razões que embasam esta visão: não é assim que ensinamos outros conteúdos, seja português, matemática ou jogar futebol; sem uma experiência prática, o aluno tem dificuldade de contextualizar a teoria, etc.
Mas uma razão merece destaque aqui: É mais divertido aprender programação programando.
Em alguns artigos e vídeos apresentamos em mais detalhes nossa visão.
Aqui, apresentamos um exemplo do que você pode fazer com um programa de 3 linhas, e vamos estudar o que ele faz. Nos cursos e vídeos da Alfamídia, tanto pagos quanto gratuitos, trabalhamos todos estes conceitos. Mas não conhecê-los de forma aprofundada não o impede de explorar e praticar um pouco, como se você estivesse investigando o que um programa faz, o que também é uma forma de aprender, e pode até mesmo ser a que melhor se adapta a seu perfil.
Mexendo em uma página
Você pode acompanhar nosso pequeno vídeo abaixo ou seguir as instrutores a seguir e observar o resultado. Depois vamos ver o que exatamente está acontecendo:
Acompanhe o vídeo ou siga o passo a passo a seguir:
1. Abra a página da Alfamídia, em www.alfamidia.com.br, no seu chrome.
2. Clique F12
3. Na janela que vai aparecer, na parte de baixo ou ao lado do site, clieque em CONSOLE
4. Digite o código a seguir, e tecle ENTER
var imgs = document.getElementsByTagName("img");
for(var i=0, l=imgs.length; i
imgs[i].src = "http://www.alfamidia.com.br/images/logo.png";
}
Se tudo ocorreu corretamente, você deve ter visto exatamente o mesmo que apareceu no vídeo, ou seja, todas as imagens sendo substituídas pelo logo da Alfamídia.
Não precisamos entender tudo para mexer e aprender brincando
Este código que estamos utilizando tem apenas 3 linhas na linguagem Javascript, mas isso não significa que seja fácil de entender. Na verdade, se você nunca programou antes, ele deve parecer incompreensível. Não se preocupe, é normal, pois aqui temos muitos conceitos juntos, e não é o objetivo aprender todos eles em apenas um pequeno artigo.
Por exemplo, só para ter uma noção de tudo que é utilizado neste pequeno código, temos, entre outros, conceitos de:
Seu código pode usar qualquer imagem da internet
Observando o código, você provavelmente percebeu onde colocamos o endereço do logo que vai ser utilizado como imagem. Trata-se de www.alfamidia.com.br/images/logo.png.
Você pode utilizar qualquer imagem que esteja na internet. Apenas visite uma página qualquer, clique com o botão direito em uma imagem, e selecione copiar endereço da imagem. Você pode agora dar um PASTE ou CTRL-V para trocar o endereço da imagem no programa.
Você pode alterar somente uma imagem do site
Length é largura em inglês. Em programação, costuma ser o tamanho de um array, ou seja, quantos elementos estão em uma determinada estrutura.
Observando o código, temos que a variável l recebe imgs.length. Experimente trocar pelo valor 1, ou por outro valor. Você verá que não serão todas as imagens do site que serão alteradas, mas apenas 1 ou algumas. Se você definir um valor que for mais que o número total de imagens no site, vai aparecer também uma mensagem de erro.
O que o código faz?
Vamos, então, entender, ainda que de forma superficial, o que este código faz.
A primeira linha utiliza uma estrutura chamada DOM, que nos permite acessar todos os elementos de uma página da internet. No caso, estamos recuperando um conjunto, ou seja um array, com referências a todas as imagens da página. Este array é armazenado em uma variável chamada imgs. A partir de agora, podemos acessar cada elemento do array, e portanto cada imagem da página, através de comandos como imgs[0], imgs[1], etc.
A segunda linha é o que chamamos de um comando de controle de fluxo. É um comando mais avançado que os primeiros que são ensinados, como if e while, pois ele executa várias instruções em uma única linha. Em resumo ele irá fazer um loop, de 0 até o tamanho do array atribuído na linha anterior.
Por fim, a última linha está dentro do loop, e é chamada várias vezes. Temos a chamada de imgs[0].src = "http://www.alfamidia.com.br/images/logo.png";
imgs[1].src = "http://www.alfamidia.com.br/images/logo.png";
etc. Tantas vezes quanto forem o número de elementos em nosso array de imagem.
É nesta terceira linha que estamos alterando o parâmetro src da tag img. Em HTML, é este parâmetro src que define a imagem que será exibida, e por isso o código altera todas as imagens da página para logo.png.
Aprendendo a programar
Apenas alterar códigos e ver o que acontece, por si só, é uma forma difícil de aprender programação. Porém, como parte de um processo maior, envolvendo estudar conceitos, práticar comandos simples, testar códigos, torna-se um instrumento muito poderoso de aprendizado.
Cursos Alfamídia
Para mais vídeos mostrando recursos rápidos de programação, confira nosso curso gratuito Programação em 5 minutos.
Para um aprendizado de lógica de programação, passo a passo, de forma prática, confira nosso curso de lógica de programação com Javascript e nossa apostila apostila de lógica de programação.
Para um aprendizado completo de programação, temos nossa formação de Programação Web, com turmas online e turmas em Porto Alegre.
(51) 3024-0730 - info@alfamidia.com.br - Porto Alegre/RS