Calculadora em Javascript


[ ver vídeo ]


DOM - Javascript com HTML


[ ver vídeo ]


Curso de Banco de Dados

Existem duas funções principais que estão diretamente ligadas a Bancos de Dados, que são relacionadas as áreas de infraestrutura e desenvolvimento de software. Para o Desenvolvedor de Sof...
[ ler mais ]


Apostilas de Informática Básica

Nos links a seguir você poderá fazer download dos pdfs das apostilas gratuitas Alfamídia relacionadas a Informática Básica. Se desejar, consulte também nossos cursos online gratuitos e pagos...
[ ler mais ]


Apostila de Front-end

Confira todas as apostilas direta ou indiretamente relacionadas a área de desenvolvimento front-end: Apostila de HTML, CSS & Javascript [ ler mais ]


Apostilas de Métodos Ágeis

Uma nova apostila de métodos ágeis foi disponibilizada gratuitamente pela Alfamídia: Apostila de SCRUM


Editando HTML com Javascript

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