Publicação: 01/08/2017
Área:Programação em 5 minutos
Transcrição
Em outro vídeo eu mostrei que não precisamos mais do que o chrome e cinco minutos para criar um programa.
Digitei about:blank. Selecionei F12. Abri o console e aqui fiz uma série de comandos que fizeram o cálculo de um fatorial. Eu posso, por exemplo, escrever um alert olá mundo, e ele exibe nesta página ola mundo. Com poucas linhas de código poderemos receber um número, fazer um cálculo do fatorial dele e exibir aqui.
Mas com isso só estamos lendo e exibindo informações em uma janela. Não estamos mexendo numa página html que é uma das atividades principais do javascript, quer dizer quando você enxerga um facebook, um twitter, etc. há muitos javascripts rodando ali e interagindo com a página.
Vamos ver que isso não é tão difícil quanto pode parecer à primeira vista.
Para isso vamos começar digitando apenas document. Quando abrimos ele nós enxergamos, por exemplo, o html, um head, e um body. Não tem mais nada aqui porque estamos com um about:blank. Se eu digitar, por exemplo, document.body, vem nosso body, que está vazio.
E se nós quisessemos colocar alguma coisa neste corpo do html? Será que poderíamos dizer simplesmente Ola Mundo.
Não, não é tão simples. Ele dá um erro aqui. Ele precisa alguma coisa um pouquinho mais.
Eu tenho que dizer que, por exemplo, innerHTML, o conteúdo html de dentro deste body é ola mundo. E o que acontece? Estamos mexendo em nossa página
document.body agora tem Ola Mundo. Podemos colocar ele aqui criando também com uma tag html
O que significa que isso é um parágrafo. Quando olhamos agora nós temos parágrafo olá mundo
E se nós quiséssemos colocar colocar mais alguma coisa aqui? Eu não quero só escrever por cima. Eu quero acrescentar alguma coisa. Eu posso colocar innerHTML é igual ao próprio innerHTML mais (e o mais aqui na outra vez eu mostrei que somava. X = X + 1 vai somando X). Mas ele também serve para concatenar strings, textos.
Olá mundo mais alguma coisa, por exemplo, outra linha, eu concatenei.
E agora html era olá mundo que já existia e outra linha.
Este tipo de comando por exemplo que eu tenho que somar alguma coisa em alguma coisa que já existe ou concatenar ou subtrair é muito comum.
Por isso em programação nós já temos um comando que faz isso. Mais igual significa que isto aqui recebe ele mesmo mais alguma coisa. No caso de string, concatenado com alguma coisa. Se eu colocar mais uma linha, eu tenho agora três linhas.
Mas eu queria poder realmente mexer nisso. Não quero só acrescentar, eu quero editar o que tem aqui.
Bom, vamos fazer, então, uma coisa um pouquinho diferente. Por quê? Porque eu preciso conseguir identificar o que é cada uma dessas linhas.
Para isso eu uso ID. Identificador. Eu estou dizendo que o primeiro parágrafo tem a identificação linha 1.
O segundo tem a identificação linha 2. segunda linha. E o terceiro, tem linha 3.
Ola mundo,
segunda linha,
terceira linha.
Mas o importante é que agora cada um deles pode ser identificado. E agora vamos ver um comando muito importante do javascript chamado GetElementByID.
Que que quer dizer isso? Dado um ID eu obtenho um elemento. Por exemplo segunda linha é igual a document.getElementByID... Do que? de linha 2.
E agora posso dizer que segunda linha ponto innerHTML recebe "nova segunda linha", e alteramos aqui no meio.
Vejam. Em poucos minutos nós mostramos como o nosso javascript pode mexer na nossa página html
(51) 3024-0730 - info@alfamidia.com.br - Porto Alegre/RS