Olá desenvolvedor, nessa Introdução ao JavaScript iremos caminhar de uma forma que você conclua esse artigo não só com uma noção do JavaScript, mas com a capacidade de hoje mesmo já começar a manipular alguns elementos no seu HTML.
JavaScript (frequentemente abreviado como JS) é uma linguagem de programação interpretada estruturada, de script em alto nível com tipagem dinâmica fraca e multiparadigma (protótipos, orientado a objeto, imperativo e, funcional).
Juntamente com HTML e CSS, o JavaScript é uma das três principais tecnologias da World Wide Web.
JavaScript permite páginas da Web interativas e, portanto, é uma parte essencial dos aplicativos da web. A grande maioria dos sites usa, e todos os principais navegadores têm um mecanismo JavaScript dedicado para executá-lo.
Também é uma linguagem client-side que é utilizada de forma mais ampla hoje em dia, além de ser muito dinâmica e poderosa.
Existem outras linguagens de script client-side como VBScript e Python, mas nenhuma delas se compara ao JavaScript, e você verá o porque no decorrer deste guia.
O que iremos Estudar neste Guia introdutório sobre JavaScript?
Introdução ao JavaScript.
Configurando seu Ambiente de Trabalho.
Introdução ao HTML.
Variáveis e Strings.
Tudo pronto? Vamos programar então! =)
A Linguagem JavaScript
Linguagens client-side (do lado do cliente) são utilizadas para tornar os seus websites mais animados, interativos e responsivos.
E cuidado, nunca confunda Java com JavaScript.
JavaScript como o próprio nome já diz, é uma linguagem de script, já o Java é uma linguagem de programação bem mais complexa.
As sintaxes utilizadas no JavaScript estão bem relacionadas com a linguagem de programação C.
Brend Eich, em 1995 desenvolveu o JavaScript. Naquela época, a linguagem era oficialmente conhecida como ActionScript e apareceu no navegador Netscape, que na época era um navegador muito popular.
Você pode muito bem utilizar o JavaScript para ajudar os usuários a interagirem com mais dinamicidade e praticidade nas páginas da Web.
O JavaScript pode também ser utilizado para controlar o navegador, fazer uma comunicação de forma assíncrona com o servidor, mudar de forma dinâmica o conteúdo de uma página Web e para desenvolver jogos e aplicações, tanto móveis como desktop.
Mas além disso o JavaScript é uma linguagem ainda muito incompreendida. E até muitas vezes ridicularizada como um brinquedo.
Mas por baixo de sua simplicidade que engana a muitos estão alguns dos recursos mais poderosos, que inclusive agora é utilizado por um número absurdo de aplicações de alto padrão, mostrando que um conhecimento profundo dessa linguagem é uma das habilidades mais importantes para o desenvolvedor Web atual.
O JavaScript é uma linguagem dinâmica orientada a objetos. Possui tipos e operadores, objetos e métodos. A diferença do JavaScript para outras linguagens (como o Java e o C) é que ele não possui classes.
Ao contrário disso, a funcionalidade de classe é realizada por protótipos de objetos.
E a outra diferença é que as funções são objetos, dando as funções uma capacidade incrível de armazenar códigos executáveis e serem repassadas como parâmetro para qualquer outro objeto.
Mas como prometi a você que iríamos praticar, vamos parar de bla bla bla e vamos colocar a mão na massa beleza?
Configurando seu Ambiente de Trabalho
Mas antes de você começar a escrever o seu primeiro programa em JavaScript, vamos observar como o JavaScript roda realmente.
Isso irá nos ajudar a identificar o aplicativos de software e ferramentas que você irá precisar para codificar em JavaScript.
Sendo o JavaScript uma linguagem de script, ele jamais pode funcionar por conta própria.
Ele é executado nos navegadores dos usuários, ou seja, o navegador é o responsável pela execução do JavaScript.
O bom disso tudo é que todos os navegadores modernos têm o JavaScript instalado e ativado por padrão.
Além de um navegador da Web, você irá precisar de um editor de texto para escrever o seu código JavaScript.
Você pode utilizar qualquer editor de texto para programar. Hoje em dia existem vários editores de textos que você pode testar para ver qual você irá se identificar mais, vou postar o link de alguns para você baixar e ver qual é o melhor para você.
– Sublime Text (Recomendamos)
– Bloco de Notas (Padrão do Windows)
Depois de ter escolhido seu editor de texto e ter instalado, estaremos prontos para escrever o nosso primeiro programa.
Introdução ao HTML
á falamos anteriormente que o JavaScript é utilizado principalmente para desenvolver sites interativos, animados e responsivos.
Sendo assim, fica evidente que o JavaScript precisa ser usado com linguagens de desenvolvimento Web.
O HTML é uma das linguagens de desenvolvimento web mais populares e o JavaScript é utilizado universalmente com o HTML.
Agora precisamos aprender onde nós vamos colocar o seu código JavaScript dentro do HTML.
Você pode colocar o seu código JavaScript de forma interna ou externa em um documento HTML, ou seja, você pode inserir seu código JavaScript dentro do seu documento HTML (internamente) ou manter o seu código JavaScript em um arquivo isolado, e então adicionar um link para esse arquivo no seu documento HTML (externamente).
Se você ainda não conhece a estrutura básica do HTML, aqui está ela:
<html>
<head>
</head>
<body>
</body>
</html>
Se você for utilizar o seu código JavaScript de forma interna, você precisará adicionar <script> e </script> e colocar o código entre estas tags; desta forma o seu navegador irá distinguir de forma fácil o seu código JavaScript do restante do seu HTML ou código CSS (folha de estilo) em sua página Web.
Você pode utilizar sua tag <script> dentro da tag <head> ou dentro da tag <body>.
Vou fazer uma pequena Amostra de código para você entender melhor sobre o que nós estamos falando.
Suponhamos que você queira exibir a data atual (no formato dd-mm-aaaa, ou seja, dia-mês-ano) no seu site. Então você irá precisar criar um documento HTML com o seguinte código:
Se você executar esse arquivo .html utilizando um navegador web, você poderá visualizar a data atual em negrito.
Como você já percebeu no nosso arquivo HTML, adicionamos o código JavaScript de forma interna em nossa sessão <head> do documento HTML.
Mas, se você quiser manter de forma externa, esse mesmo código que utilizamos no exemplo anterior, basta você copiar e colar as seguintes linhas de código em um novo arquivo:
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+1;
var yyyy = today.getFullYear();
if(dd<10)
dd = ‘0’ + dd;
if(mm<10)
mm = ‘0’ + mm;
today = dd + ‘-‘ + mm + ‘-‘ + yyyy;
document.write(“<b>” + today + “</b>”);
Agora é só você salvar o arquivo como dataatual.js. Agora, copie as seguintes linhas de código para um novo arquivo:
<html>
<head>
<title>Introdução ao JavaScript utilizando código externo!!</title>
<script type=”text/javascript” src=”dataatual.js”>
</head>
<body>
</body>
</html>
Salve esse documento HTML como exibirdata.html.
Certifique-se de que você salvou tanto o arquivo exibirdata.html como o dataatual.js na mesma pasta.
Se eles ficarem em pastas separadas, significa que quando você definir o valor do atributo src da tag <script>, você deverá especificar o caminho completo e correto para o arquivo js.
Agora se você abrir o arquivo exibirdata.html utilizando o seu navegador web, você terá uma página Web que exibirá a data atual. Muito bom hein?
Agora você deve estar se perguntando quando eu devo colocar um código JavaScript Interno, e quando colocar um externo.
Se o código que você escreveu for especifico para uma ou duas das suas páginas e você não tem que escrever muitas linhas de código, então é bem melhor e mais pratico manter o seu código internamente.
No entanto, se você tiver muitas linhas de código que são muito comuns para muitas de suas páginas Web, então você deve considerar manter seu código externamente.
E geralmente você terá que aplicar o código JavaScript em muitas das suas páginas, por isso a vantagem de se utilizar externamente, pois ao invés de escrever página por página, você só aplica o link com o código js na pagina.
E outra vantagem de se inserir o código JavaScript externamente é que o código se tornará facilmente controlável e editável. Suponha que você decida, mais tarde, mostrar a data no formato DD/MM/AAAA.
Bem, você terá que fazer alterações em apenas um único arquivo .js, e essa mudança será refletida em todas as páginas da Web que possui o link para o arquivo.
Variáveis e Strings
Não diferente das outras linguagens de programação, o JavaScript também precisa ter uma opção para armazenar dados.
E é aqui que as variáveis surgem.
As variáveis nada mais são além de recipientes de dados. Você pode usar variáveis para armazenar dados ou valores.
Você também pode utilizar as variáveis em expressões para realizar vários tipos de cálculos.
Iremos atribuir nomes exclusivos para cada variável. Embora você tenha liberdade para colocar os nomes que quiser em cada variável.
Mas, embora os nomes das variáveis possam conter letras, números, sinais de dólar e sublinhados, os nomes das variáveis jamais devem iniciar com um dígito.
Além disso, você não pode usar palavras-chave reservadas ao JavaScript nos nomes de suas variáveis.
Os nomes das variáveis são case-sensitive (diferencia letras minúsculas das maiúsculas), tornando “programador” e “PROGRAMADOR” duas variáveis diferentes.
Listo abaixo algumas variáveis válidas e outras invalidas:
Variáveis válidas:
- seuNome
- $programador
- nome_funcionario
- _minhaLoja
Variáveis invalidas:
- 9programadores
- let
- funcionario-contratado
- programador#games
- aluno danki
Agora vamos ver como você pode criar suas próprias variáveis.
Antes de você usar uma variável, você deve cria-la, ou seja, declará-la.
Você deverá utilizar a palavra-chave var para declarar um variável, como no exemplo abaixo:
var desenvolvedorWeb;
Você especificou a palavra-chave var seguida pelo nome da variável e um ponto e vírgula. O Ponto e virgula comunica ao JavaScript que a instrução passada atual está finalizada.
Quando você declara uma variável, uma variável sem valor é criada/iniciada.
Você pode imediatamente atribuir um valor à variavel apenas utilizando o sinal de igual, como no exemplo abaixo:
var desenvolvedorWeb = 10
Você pode muito bem atribuir um valor para a variável assim que você declará-la. Ou seja, os seguintes trechos de código estão ambos corretos:
var programadorWeb;
programadorWeb = 10;
OU
var programadorWeb = 10;
Em uma variável não se armazena só números, mas também pode-se armazenar strings.
Exemplo: (“Pedro”, “Meu nome é Fábio”);
Valores booleanos: (verdadeiro ou falso);
Arrays: (conjunto de dados);
Objetos: (pares de chave/valor);
Expressões: (8 + 10);
Todos estes diferentes tipos de dados que as variáveis podem conter são conhecidos como tipos de dados.
Logo logo vou mostrar para você como funciona as matrizes e objetos em detalhe.
Quando você atribui números, expressões ou valores booleanos, você coloca o valor entre aspas duplas.
Valores de strings, por outro lado, precisam ser colocados entre aspas duplas.
Exemplo:
var nomeEmpresa = “Danki Code”;
var isSubmitted = true;
var sumVal = 8 + 10;
Facilmente você pode concatenar valores de string utilizando o operador +.
A unica coisa que você precisa fazer é adicionar um sinal de mais entre as strings, e pronto, está concatenado.
Exemplo:
var primeiroNome = “Tiago”;
var sobreNome = “Silva”;
var nomeCompleto = primeiroNome +” “+ sobreNome;
Agora, qual o valor da variável nomeCompleto? Acertou se você disse “Tiago Silva”.
Observe que foi adicionado um espaço vazio entre os dois nomes.
Algumas vezes você terá que recolher dados de entrada dos usuarios e exibi-los na sua página Web, após a adição de algumas mensagens.
Então, como você pode obter esses dados de entrada do usuário? Muito simples.
Você irá precisar usar o método prompt() para coletar esses dados.
O método prompt() mostra uma caixa de diálogo (com uma caixa de texto para que o usuário digite os dados de entrada) e mais dois botões: OK e CANCELAR.
Depois de colocar uma entrada, o usuário tem que clicar em OK ou CANCELAR para continuar.
O que nós vamos fazer agora é atribuir diretamente o método prompt() a uma variável de modo que a entrada será imediatamente atribuída à variável assim que o usuário introduzir qualquer entrada.
Então, como você pode obter esses dados de entrada do usuário? Muito simples.
Você irá precisar usar o método prompt() para coletar esses dados.
O método prompt() mostra uma caixa de diálogo (com uma caixa de texto para que o usuário digite os dados de entrada) e mais dois botões: OK e CANCELAR.
Depois de colocar uma entrada, o usuário tem que clicar em OK ou CANCELAR para continuar.
O que nós vamos fazer agora é atribuir diretamente o método prompt() a uma variável de modo que a entrada será imediatamente atribuída à variável assim que o usuário introduzir qualquer entrada.
A sintaxe do prompt() é:
prompt(message, text) onde ‘message’ é a mensagem que é exibida na caixa de dialogo e text é o texto padrão que é exibido na caixa de texto.
Sendo que message é um parâmetro obrigatório enquanto que text é um parâmetro opcional.
Exemplo:
var usuarioNome = prompt(“Qual é o seu nome?”, “Digite aqui”);
Este código irá abrir na frente do seu navegador uma caixa de alerta como está:
Existe um outro método para exibir os dados na saída da página Web. O método é o document.write() para imprimir algo na sua página.
Aqui, write() é, obviamente, um método, e, por enquanto, apenas compreenda que document é um objeto com um número de propriedades e métodos que acessa todos os elementos no documento HTML do JavaScript.
A sintaxe do método document.write() é: document.write(exp1, exp2, …)
Onde exp1, exp2, etc., são expressões para imprimir uma página Web. E você pode ter quantas expressões desejar.
Exemplo:
document.write(“Meu nome é Fábio”);
var primeiroNome = “Guilherme”;
document.write(primeiroNome);
Você pode ter que adicionar comentários em seu código JavaScript para torná-lo mais legível e compreensível.
Algumas vezes, o seu código não será atualizado ou mantido por você, mas por outra pessoa, e elas podem não entender o motivo de determinadas linhas de código. Assim, adicionar comentários é uma excelente prática de programação.
Você pode adicionar comentários de uma única linha, iniciando a linha de código com // (duas barras).
Se o seu comentário for grande de mais que chegue a se estender por várias linhas, então, inicie o seu comentário com /* e finalize com */.
Os comentários serão ignorados pelo JavaScript.
Exemplo:
// Atribui o valor Guilherme a variável denominada primeiroNome
var primeiroNome = “Guilherme”;
/* Codigo que exibirá a data atual no formato dd-mm-yyyy usando o objeto Date do JavaScript. */
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth()+ 1;
var yyyy = today.getFullYear();
if(dd<10)
dd = ‘0’ + dd;
if(mm<10)
mm = ‘0’ + mm;
today = dd+’-‘+mm+’-‘+yyyy;
document.write(“<b>” + today + “</b>”);
Vamos fazer um ultimo exercício para finalizar essa sessão do nosso artigo.
Vamos coletar o nome e a idade de um usuário e exibir uma mensagem no formato “Oi Felipe ! Você tem 25 anos.” em uma página Web.
Os valores Felipe e 25 devem ser substituídos pelos valores inseridos pelo usuário. Adicione os comentários de forma sabia.
Abra o seu editor de texto e digite:
<html>
<head>
<title>Coleta os Inputs e Imprime o Resultado!!!</title></head>
<body><script>
//Pergunta o nome
var name = prompt(“Favor digitar seu nome!!!”);//Pergunta a idade
var age = prompt(“Favor digitar sua idade!!!”);//Concatenta as strings para exibir a mensagem na forma exigida
document.write(“Oi ” + name + “!! Você tem ” + age + ” anos.”);
</script></body>
</html>
Agora salve o documento como um arquivo .html
Abra o seu navegador e você verá duas caixas de diálogo. Vamos supor que você digite João na primeira caixa e 88 na segunda caixa, os dados de saída que serão exibidos serão bem parecidos com estes:
Oi João !! Você tem 88 anos.
Conclusão da Introdução ao JavaScript
Bem, como essa é apenas uma introdução ao JavaScript para iniciantes acho bom nós pararmos por aqui antes de irmos para um nível um pouco mais avançado, acredito que essa já é uma boa base para você continuar pesquisando e estudando.
Mas fique atento as nossas publicações, pois sempre vamos avançar por águas mais profundas e assim trazer mais conhecimento e experiência para você que nos acompanha.
Quer Conhecer Mais Sobre Desenvolvimento de Softwares? Ou Mesmo Entender Sobre Programação?
Conheça o Pacote Full-Stack MASTER da Danki.Code, onde você aprende programação desde o absoluto ZERO ao Nível Avançado.
São +18 CURSOS em Mais de +2500 Aulas e Tudo com Suporte Individual Personalizado, Certificados, Satisfação Garantida 
Ou o Seu Dinheiro de Volta!
Curta e Compartilha!
Não esqueça de deixar sua opinião nos comentários, e claro, de compartilhar o conteúdo com um a amigo que se interesse! 😊👇
Descubra mais sobre Cantinho Binário
Assine para receber nossas notícias mais recentes por e-mail.