Curso de Javascript | Aula 03 - Como Imprimir Informações com as Funções Write, Log e Alert!
Quer Aprender Como Imprimir Informações para o Usuário e Desenvolvedor usando Javascript? Então, assista ao vídeo e leia o artigo!
Esta é a terceira vídeo aula da série de aula do curso de Javascript aqui do portal Cursos Guilherme. E, nesta vídeo aula você aprenderá a usar três funções do javascript usadas para mostrar informações na página html, sendo que cada uma possui a sua peculiaridade.
Se você gosta de javascript, e quer ter um professor para te ensinar a desenvolver projetos usando esta linguagem tão utilizada na programação front-end. Te convido, venha participar do curso de desenvolvimento web aqui do portal. Atualmente, o curso já passa das 31 Horas de Conteúdo e 100 vídeo aulas já prontas. Clique Aqui para Saber mais!
Curso de Javascript Aula 03 - Como Usar as Funções Alert, Document.Write e Console.log
A Função Alert!
A função alert é uma função muito conhecida, pois não é só usada pelos desenvolvedores, programadores para exibir, imprimir dados na tela para o usuário, mas também é usada para exibir informações para nós que programamos.
Pois, algo normal de se fazer com a função alert é verificar se o arquivo js ou mesmo uma função está sendo chamada. E, para isso, podemos fazemos um simples alert usando a seguinte estrutura:
// O código abaixo gera um alerta alert();
Caso queira exibir algum texto use o modelo abaixo, lembrando que no javascript string (um ou mais caractéres) devem estar envoltos por aspas simples ou aspas duplas.
alert("Meu Texto");
A função alert também aceita valores numéricos, os quais você pode colocar envolto por aspas duplas duplas ou simples (será encarado como uma string), ou sem aspas para ser interpretado como valor propriamente numérico. Veja o exemplo:
alert(1000);
Caso necessite, a função alert também pode ser utilizada para exibir resultados de funções e operações matemáticas.
// Para imprimir resultados de operações matemáticas
alert(1 + 2 * 3);
function adicao(n, m) {
return n + m;
}
// Para exibir retorno de funções
alert( adicao(1, 2) );
Como pode ver usar a função alert é simples, e a idéia é essa, pois já que a estaremos usando para fazer testes, simplicidade ajuda muito.
E, usamos alert em testes, pois ao ser chamada a função alert fará aparecer um alert (alerta, "pop up") na tela e dessa forma confirmamos se o arquivo está sendo carrregado ou a função testada está sendo chamada.
Se para você tudo isso que foi falado é muito novo, muito complicado, te convido a participar do curso de desenvolvimento web aqui do portal. Pois, o curso tem como foco ensinar do básico até a produção de projetos usando html5, css3, javascript, php e mysql.
Ou seja, no curso você verá as linguagens que usamos na produção de projetos web, sejam estes sites, blog, lojas virtuais ou mesmo web apps (sites que funcionam como aplicativo/programa online). Clique Aqui e Descubra Quais Temas são Ensinados no Curso!
A Função Write do Objeto Document!
A função write do objecto document é outra função que podemos usar para imprimir informações na tela, só que diferente da função alert que cria um alerta, a função write imprime a informação direto no corpo da página.
Ao usar a função document.write com a estrutura abaixo você estará imprimindo na página html uma tag h1 com o texto "Meu Título!"
document.write("<h1>Meu Título!</h1>");
Como pode ver é bem simples de se usar a função write do objeto document. Contudo, é preciso se atentar para um detalhe importante.
Diferente da função alert que pode ser chamada em qualquer momento, a função document.write só poderá ser usada enquanto o objeto document estiver acessível. E, este momento em muitos casos se resume ao momento de carregamento da página, terminado o carregamento, e perdendo o objeto document, não será possível usar a função write.
Os exemplos de uso da função write são semelhantes ao do alert, por isso podemos pegar os mesmos, só se atentando de trocar de alert para document.write.
document.write("Meu Texto");
document.write(1000);
// Para imprimir resultados de operações matemáticas
document.write(1 + 2 * 3);
function adicao(n, m) {
return n + m;
}
// Para exibir retorno de funções
document.write( adicao(1, 2) );
A função Log do Objeto Console!
De todas estas funções com certeza, a função log do objeto console é a mais recomendada para realizar testes de chamada de funções e de arquivos javascript.
Pois, diferente da função alert que é apropriada para mostrar informações ao usuário final, e a função document.write que é utiliza para imprimir conteúdo diretamente na página html. A função console log é especializada em exibir as informações, os dados num formato muito agradável para nós desenvolvedores.
Ao se usar a função console.log, dependendo do navegador utilizado, você terá informações sobre o nome do arquivo e a linha aonde a função console.log foi escrita, e isso é extremamente interessante, principalmente se está debugando (fazendo teste de funcionamento) seu programa javascript.
Podemos reaproveitar os exemplos citados acima para uso da função log do objeto console, mas farei outros para que você pode ter mais exemplos para testar em seus códigos.
console.log(1 * 2);
console.log(2 > 3);
let valor = 1;
console.log( (valor > 5) ? "Valor é maior que 5" : "Valor está baixo" );
let objeto = {
largura:"5cm",
altura:"7cm"
}
console.log(objeto);
Como pode ver a função console.log é bem versátil, e sinceramente considero ela mais interessante para exibir informações de teste do que as funções alert e document.write.
Pois, ao usar a função alert, a página fica travada, você não consegue interagir diretamente com a página enquanto não fechar o alert. E, o document.write tem o incoveniente de depender da acessibilidade do objeto document.
Porém, é preciso se atentar a um detalhe. Você só conseguirá ver a função console.log em ação se abrir o console do navegador. E, como cada navegador tem o seu jeito para isso, você precisará verificar em seu browser.
Quer Aprender a Programar em Javascript?
Se você gosta de javascript ou se interessou pelo assunto te convido a participar do meu curso de desenvolvimento web. Nele ensino como programar em javascript indo bem do básico, explicando os detalhes desta linguagem tão difundida. Clique Aqui e Veja Mais sobre o Curso!
Dúvidas e Sugestões?
Caso possua alguma dúvida sobre a linguagem javascript ou sobre alguma das funções aqui faladas, ou quer dar alguma sugestão de conteúdo que tem interesse em aprender pode entrar em contato por email (está disponível no menu do site localizado no topo).
Quer Ser um Desenvolvedor Front-End e Back-End?
Está querendo estudar desenvolvimento web para se tornar um programador/desenvolvedor back-end e front-end te convido a conhecer o meu curso sobre Desenvolvimento Web, aonde Ensino como Trabalhar com Html5, Css3, Javascript, Php e Sql (MySQL e MariaDB) para criar projetos para Web como Sites e Aplicativos Web. Atualmente o curso possui mais de 31 Horas de Aulas em Vídeo e mais de 100 Vídeos Aulas prontas. Clique Aqui e Venha conhecer o Curso!
