JavaScript: Desenvolvendo o Seu Primeiro Programa
Neste artigo vamos desenvolver o seu primeiro programa em JavaScript utilizando algumas técnicas simples para que você vá se acostumando com a linguagem.
Primeiramente, para iniciarmos nosso aprendizado em JavaScript, construiremos o projeto do site Empresa de Nutrição.
Portanto, continue lendo esse artigo para não perder nenhum detalhes.
Confira neste artigo:
Conhecendo o Projeto
Após baixar e descompactar, acesse a pasta javascript-introdução do seu computador, e depois abra o arquivo index.html no editor de textos.
Vamos abri-lo também no browser, para nos familiarizarmos com a interface do site.
A Empresa de Nutrição fazia controle dos clientes com fichas cadastrais, preenchidas manualmente, nas quais eram armazenados dados como:
- Nome;
- Peso;
- Altura Corporal;
- Entre outros.
Com a criação do site, a empresa conseguirá armazenar as informações, a serem exibidas em uma tabela, em que novos cadastros serão adicionados dinamicamente por meio do JavaScript, e poderão ser filtrados posteriormente.
Essa empresa também não precisará mais fazer cálculos manualmente, como os de IMC e da porcentagem de gordura corporal dos clientes.
Ou seja, todos serão realizados utilizando-se o JavaScript. Criaremos um site que realmente facilitará o trabalho dessa Empresa!
Começaremos criando a função que exibirá a mensagem “Hello World”, ou “Olá Mundo” no JS.
Nessa série de artigos, utilizarei o editor de textos Brackets mas existem diversos outros como o Sublime Text 3 e o Visual Studio Code. Escolha de acordo com sua preferência. Clique Aqui para saber mais sobre editores de texto.
Adicionaremos a funcionalidade e o dinamismo na página de pacientes, e para isto precisaremos primeiro aprender como utilizarmos o JavaScript corretamente nas páginas.
Ou seja, uma primeira tentativa consiste em utilizarmos as funções dentro do corpo de nossa página.
JavaScript: alert
No início do arquivo index.html, logo após a tag <body>, exibiremos um alerta com JavaScript, utilizando a função alert:
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
alert("Olá mundo");
<!-- Restante do index.html -->
</body>Quando abrir a página index.html no navegador, veremos o seguinte resultado:
Repare que o script está sendo exibido como texto, ou seja, o navegador não fez nenhum tratamento especial para interpretar o código.
Precisaremos adicionar a tag <script>, vamos remover o código que adicionamos agora pouco. Iremos então adicionar a função alert, dentro da tag <script> que ficará dentro da tag <head>:
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script>
alert("Olá mundo");
</script>
</head>Agora, quando recarregarmos a página no navegador, nosso trecho de script será interpretado como um código, e não como um conteúdo qualquer da página.
O alerta com a mensagem foi exibido com sucesso!
Portanto, a função alert é uma das opções para se exibir mensagens com JavaScript, porém, ela não é a única.
Leia também: Os 5 Melhores Livros Para Aprender JavaScript Sozinho
JavaScript: console.log
Outra função útil para exibir mensagem é o console.log, considerado “mais agradável” para a exibição de uma mensagem por não envolver um pop-up. A mensagem será exibida no console do navegador.
Vamos testá-la:
<head>
<meta charset="UTF-8">
<title>Aparecida Nutrição</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
<script>
console.log("Oi Mundo");
</script>
</head>No Linux ou no Windows, acessamos o console do navegador pressionando a tecla “F12”. No MacOS basta pressionar “COMMAND + ALT + J”.
Ao abrirmos o console do navegador, veremos que a mensagem que escrevemos utilizando a função console.log é apresentada com sucesso:
Além disso, o console do navegador também aceita funções JavaScript. Poderemos escrever novamente console.log:
console.log("Aqui tem um recado para você");Ou até mesmo um alerta:
alert("Olá");
Conclusão
Em conclusão, neste artigo aprendemos a exibir mensagens com JavaScript utilizando as funções:
- alert – Para mostrar um pop up com a mensagem.
- console.log – Para exibir a mensagem através do console do navegador.
Ou seja, vimos também que as funções JavaScript devem estar entre as tags <script>. Caso contrário, os navegadores não irão entender-lo.
Esse foi o primeiro passo com a linguagem de programação JavaScript. Espero que este artigo tenha te ajudado a dar mais um passo em busca de seus objetivos. 😉
Gostou do conteúdo?
Comente aqui em baixo o que você achou desse artigo.
Clique no botão abaixo para ter acesso a mais de 1400 cursos completos para alavancar sua carreira profissional.
ACESSAR CURSOS COM CERTIFICADOUm forte abraço!
Artigos Relacionados
Sobre o Autor
DICA EXTRA: Algumas pessoas estão me perguntando qual é o curso que recomendo para quem deseja aprender programação, mesmo sem ter qualquer conhecimento sobre o assunto. Minha recomendação, tanto para quem está iniciando, como para quem já possui mais experiência, é essa AQUI...
3 Comentários
No inicio o Sr. comenta de fazer um download; mas não tem link, ou não soube encontra-lo.
Boa noite, realmente havia esquecido de colocar os arquivos para fazer o download. Acabei de atualizar o artigo inserindo o download do projeto para acompanhar o artigo. Um forte abraço!
Muito bom!!!