Tutorial de Javascript: Hello world

Este tutorial ajuda você a começar com JavaScript. Ele explica o que você precisa para escrever seu primeiro programa em JavaScript. Começa com o básico: você aprenderá onde pode encontrar e baixar as ferramentas necessárias, como instalá-las e irá guiá-lo até a construção e execução do seu código. Se você nunca escreveu um programa em JavaScript antes, este é o lugar para começar. Criamos este artigo para que você possa começar com JavaScript e avançar para nossos exemplos de SMS. Se você já está familiarizado com JavaScript, pode pular diretamente para um dos seguintes projetos de SMS.

Exemplos de SMS em Javascript:

Javascript enviar SMS com a API REST HTTP (exemplo de código)
Javascript enviar múltiplos SMS com a API REST HTTP (exemplo de código)
Javascript agendar SMS com a API REST HTTP (exemplo de código)
Javascript receber SMS com a API REST HTTP (exemplo de código)
Javascript deletar SMS com a API REST HTTP (exemplo de código)
Baixar a biblioteca mais recente da API de SMS em JavaScript do Github

Hypertext Markup Language (HTML) é uma ferramenta para definir a estrutura de um site. HTML é a linguagem de marcação padrão para criar páginas da web. Junto com o CSS, eles fazem os sites parecerem como são. HTML consiste em uma série de elementos, que dizem ao navegador como exibir o conteúdo. Neste tutorial, usamos para exibir a mensagem "hello world".

JavaScript é uma linguagem de programação de script. É semelhante a uma linguagem natural, como inglês. É usado para se comunicar com um computador. A principal diferença entre uma linguagem natural e uma linguagem de programação é que as linguagens de programação têm uma estrutura mais rigorosa, para ajudar o computador a entendê-la melhor. Neste tutorial, usamos código Javascript para imprimir a mensagem "hello world".

O termo servidor web pode se referir a hardware ou software, ou ambos trabalhando juntos. No lado do hardware, um servidor web é um computador usado para servir os clientes web. No lado do software, os servidores web executam um código PHP que lida com as solicitações HTTP dos clientes web.

Um navegador web é um aplicativo para acessar a World Wide Web. Quando um usuário solicita uma página web de um site específico, o navegador web recupera o conteúdo necessário de um servidor web e exibe a página no dispositivo do usuário. Funciona de forma que o usuário possa fazer solicitações HTTP aos servidores web. Com um navegador web, podemos acessar o servidor web digitando seu endereço IP ou domínio no campo de URL.

WampServer refere-se a uma pilha de soluções para o sistema operacional Microsoft Windows, consistindo no servidor web Apache, OpenSSL para suporte SSL, banco de dados MySQL e linguagem de programação PHP. WAMP age como um servidor virtual em seu computador. Permite que você teste todos os recursos da web sem consequências, já que está localizado em sua máquina e não está conectado à web. Vamos usá-lo para hospedar nosso site HTML localmente.

Para escrever seu primeiro programa em Javascript:

1. Instale o WAMP em seu computador
2. Configure o servidor WAMP
3. Crie um novo arquivo index.html
4. Componha seu primeiro documento HTML
5. Escreva seu primeiro código Javascript no arquivo .html
6. Execute seu primeiro programa em Javascript
7. Abra o modo Inspect para notificação de erros
8. Corrija o erro

• Computador com Windows 10
• Ambiente WAMP
• Navegador Chrome
• Exemplo HTML Hello World
• Exemplo Javascript Hello World

Neste vídeo, vamos baixar o servidor WAMP. Este é o software que usaremos para hospedar nosso código Javascript. Primeiro, você deve visitar https://wampserver.com. e baixar o instalador do WampServer (Vídeo 1). Após o download ser concluído, o instalador estará no diretório de downloads especificado pelo seu navegador. Abrir este exe iniciará o processo de instalação do servidor WAMP.

Comece acessando https://wampserver.com em seu navegador. Clique no botão Download no topo para ser automaticamente rolado até a seção de downloads. Clique em WAMPSERVER 64 BITS (X64) para baixar o instalador do WampServer para seu computador (Figura 1).

O próximo passo após baixar o WampServer é instalá-lo. Este vídeo mostra como você pode concluir a instalação com sucesso. Abra o instalador, configure os detalhes da instalação e aguarde o processo ser concluído (Vídeo 2). Quando você instalar o WAMP Server, ele começará a ser executado automaticamente. Agora que o WAMP Server está em execução, você pode começar a programar em Javascript.

Escreva e baixe sua primeira página HTML

Para escrever seu primeiro documento HTML, você deve criar um novo arquivo index.html na pasta \www\ do WampServer.
Caminho: C:\wamp64\www\

<!DOCTYPE html>
<html>
	<head>
		<title>Olá mundo!</title>
	</head>
	<body>
		<h1 id="text">Olá mundo!</h1>
	</body>
</html>
	

Este vídeo mostra como você pode criar um documento HTML (Vídeo 3). Usaremos este documento mais tarde para hospedá-lo localmente. Devido ao fato de estarmos executando um WampServer em nosso computador, podemos visualizar nossos arquivos no URL http://localhost/. Para isso, você deve criar ou colocar seu arquivo HTML na pasta \www\.
Caminho: C:\wamp64\www\

Neste exemplo, vamos substituir o texto na tag <h1> com o id "text". Para isso, usaremos o seletor de consulta JavaScript integrado. Isso pode parecer complicado, mas é fácil. Vamos selecionar o elemento com o id "text" e definir seu atributo innerText (para nosso elemento, é como uma característica de uma pessoa) igual ao texto "Olá Ozeki!".

/*Este código JavaScript vai substituir o texto na tag
que tem o id chamado "text".*/
document.getElementById("text").innerText = "Olá Ozeki!";
	

Este vídeo mostra como você pode escrever código JavaScript e executá-lo em seu navegador (Vídeo 4). O comando em si que exibe a mensagem deve ficar dentro de tags de script. Essas tags indicam que um trecho de código JavaScript deve ser executado aqui. O código em si é uma função que tem "Olá Ozeki" como seu argumento. Depois de escrever e salvar seu código, você pode executá-lo em seu navegador.

Se cometemos um erro em nosso código JavaScript, podemos ver nossos erros no modo de inspeção do navegador. Para isso, devemos clicar com o botão direito do mouse e selecionar Inspect no menu. Ou podemos simplesmente pressionar (Ctrl + Shift + I). Lá, selecionamos a Console, e todos os erros serão exibidos.

O que é erro de sintaxe?

Erro de sintaxe significa "Eu não entendo". Se você falar com alguém em inglês e ele não entender o que você diz, ele responderá com "Eu não entendo". Se você falar com um computador em JavaScript e o computador não entender o que você diz, ele responderá com "Erro de sintaxe".

Como lidar com um erro de sintaxe em JavaScript?

No código abaixo, criaremos um erro de sintaxe intencionalmente, não colocando um ponto e vírgula após a linha "Hello World". Você verá como o computador reage, como corrigimos o erro e como executamos o programa com sucesso.

Este vídeo mostra como você pode verificar se há um erro em seu código usando o modo Inspect em seu navegador. Este é um recurso incrivelmente útil para ajudá-lo a corrigir seus erros (Vídeo 5). O console de depuração no modo Inspect apresenta mensagens de erro que indicam o que deu errado. Você pode clicar no índice dessas mensagens de erro para destacar a linha exata do código que causou o erro.

O artigo acima é sobre o que você precisa escrever em seu primeiro programa JavaScript, que é um exemplo de código "Hello World". Este programa pode parecer simples e pode não fazer muito, mas é assim que grandes coisas começam; seguindo este guia, você deu seu primeiro passo para se tornar um desenvolvedor JavaScript. Saber como codificar em JavaScript e criar programas como solução para seus problemas ajudará muito a tornar o trabalho mais suave.

O que você aprendeu aqui é valioso, há outros guias úteis no site da Ozeki, vá em frente! Vamos para o próximo artigo sobre como enviar SMS com JavaScript.

Agora baixe o Ozeki SMS Gateway e mãos à obra!