Instalando o WampServer no Windows
20 de julho de 2017
A chave para melhores resultados de pesquisa na busca móvel: 10 dicas rápidas
10 dicas para melhores resultados na busca em dispositivos móveis
2 de agosto de 2017

Fundamentos de JavaScript – parte 1

Muitos são aqueles que preferem encarar bibliotecas e frameworks de JavaScript, e não encarar a linguagem pura. Tais recursos e ferramentas são muito bons e garantem algumas vagas de emprego hoje em dia, mas conhecer os fundamentos é, sem sombra de dúvidas, a melhor opção para uma carreira estável no mercado de desenvolvimento web.

Durante anos eu evitei estudar JavaScript. Se precisava de qualquer recurso que usasse a linguagem, procurava scripts prontos na web, de preferência que fossem de JQuery. Quando comecei a trabalhar no INPE (Instituto Nacional de Pesquisas Espaciais) me deparei com cenários onde conhecer os métodos do JavaScript passou a ser vital para meu dia a dia como desenvolvedor. Então, tratei de correr atrás do prejuízo.

Hoje quero dividir com você o que já aprendi. Espero que continue comigo aqui no blog, pois a estrada é praticamente infinita e podemos crescer bastante juntos.

O que é JavaScript

Segundo a documentação da Mozilla Developers, JavaScript é uma linguagem de script orientada a objetos, multiplataforma. É uma linguagem pequena e leve. Dentro de um ambiente de host (por exemplo, um navegador web) o JavaScript pode ser ligado aos objetos deste ambiente para prover um controle programático sobre eles.

JavaScript  tem uma biblioteca padrão de objetos, como: Array, Date, e Math, e um conjunto de elementos que formam o núcleo da linguagem, tais como: operadores, estruturas de controle e declarações. O núcleo do JavaScript pode ser estendido para uma variedade de propósitos, complementando assim a linguagem:

  • O lado cliente do JavaScript estende-se do núcleo linguagem, fornecendo objetos para controlar um navegador web e seu Document Object Model (DOM). Por exemplo, as extensões do lado do cliente permitem que uma aplicação coloque elementos em um formulário HTML e responda a eventos do usuário, como cliques do mouse, entrada de formulário e de navegação da página.
  • O lado do servidor do JavaScript estende-se do núcleo  da linguagem, fornecendo objetos relevantes à execução do JavaScript em um servidor. Por exemplo, as extensões do lado do servidor permitem que uma aplicação comunique-se com um banco de dados, garantindo a continuidade de informações de uma chamada para a outra da aplicação, ou executar manipulações de arquivos em um servidor.

Criando um ambiente de desenvolvimento

Se quiser usar algum servidor já instalado em seu computador (apache, nginx, tomcat), fique a vontade – eu uso o Apache através do WampServer. Você pode também usar o Node.js para criar um servidor, se preferir.

Instalar WampServer (Apache, PHP e MySQL) no Windows

Instalar Node.js e NPM

Crie um diretório onde colocaremos nossos arquivos. Pode chamá-lo de meus-scripts. Se quiser, pode usar o terminal ou prompt de comando para criá-lo.

mkdir meus-scripts

Agora, abra este diretório em seu editor de textos preferido. Eu gosto de usar o Visual Studio Code ou o Sublime Text, mas fique a vontade para usar seu editor preferido.

Aconselho você ter também o Firefox instalado com a extensão Firebug, ou o Google Chrome.

Fundamentos de JavaScript

Hoje veremos alguns fundamentos básicos de JavaScript, e se o artigo ficar legal, faremos uma parte 2. No artigo de hoje veremos:

  • Como executar um código em JavaScript
  • Variáveis
  • Tipos de dados

Se tudo der certo na parte dois dessa “série” de artigos, veremos:

  • Operadores – aritméticos, de comparação e de atribuição
  • Funções
  • Parâmetros de funções
  • Funções globais

Chega então de papo e bóra para os códigos!

Como executar um código JavaScript

Embora a linguagem JavaScript tenha sido desenvolvida para o lado cliente da aplicação (ou seja, na parte do site onde o usuário acessa a aplicação – navegador), hoje em dia podemos usá-la também no lado servidor, através da plataforma Node.js. Porém, focaremos no uso do JavaScript no lado cliente, para facilitar as coisas.

Para quem tem interesse no Node.js, temos um curso de criação de sites com Node.js em andamento aqui no blog. Abaixo você acessa as duas primeiras aulas

Para executar os códigos deste tutorial, torna-se essencial o uso de um navegador moderno (chrome ou firefox) e um editor de texto.

Como dissemos anteriormente, o JavaScript é executado no navegador do usuário. Desta maneira, é necessário uma estrutura HTML para que nossos códigos possam funcionar. Então usaremos uma estrutura simples, e para inserir nosso código, usaremos as tags <script type=”text/javascript”></script>. Todo código JavaScript inserido esta maneira, na página HTML, é chamado inline.

Dentro das tags <script type=”text/javascript”></script> inserimos o código alert(“Meu código JavaScript”);. Este código exibe uma caixa de alerta na página HTML. Nesta caixa de alerta a frase Meu código JavaScript é impresso. Abaixo segue o código de nosso exemplo.

 

Crie um arquivo com o nome index.html no diretório meus-scripts e cole o código acima. Execute este arquivo dando dois cliques sobre ele. Você verá nossa caixa de diálogos aparecendo.

Outra maneira de executar nossos códigos JavaScript é através de um arquivo externo. No diretório meus scripts crie um arquivo com o nome script.js. Neste artigo, digite o código abaixo:

document.write(“Este texto é de um arquivo externo”);

Salve o arquivo. Repare que no arquivo index.html existe uma linha de código que não mencionei.

<script type=”text/javascript” src=”script.js”></script>

Este código chama o arquivo script.js que você acabou de criar para dentro do seu arquivo index.html. Se você der um refresh no seu navegador (apertado F5), verá que, logo após nossa caixa de alerta ser fechada, o texto Este texto é de um arquivo externo aparece renderizado no navegador.

Variáveis

Você usa variáveis como nomes simbólicos para os valores em sua aplicação. O nome das variáveis, chamados de identificadores, obedecem determinadas regras.

Um identificador JavaScript deve começar com uma letra, underline (_), ou cifrão ($); os caracteres subsequentes podem também ser números (0-9). Devido JavaScript ser case-sensitiva, letras incluem caracteres de “A” a “Z” (maiúsculos) e caracteres de “a” a “z” (minúsculos).

Você pode usar a ISO 8859-1 ou caracteres Unicode tal como os identificadores å e ü. Você pode também usar as sequências de escape Unicode como caracteres e identificadores.

Alguns exemplos de nomes legais são Numeros_visitas, temp99, e _nome.

Declarando variáveis

No JavaScript ocê pode declarar uma variável de três formas:

  • Com a palavra chave var. Por exemplo, var x = 42. Esta sintaxe pode ser usada para declarar tanto variáveis locais como variáveis globais.
  • Por simples adição de valor. Por exemplo, x = 42. Isso declara uma variável global. Essa declaração gera um aviso de advertência no JavaScript. Você não deve usar essa variante.
  • Com a palavra chave let. Por exemplo, let y = 13. Essa sintaxe pode ser usada para declarar uma variável local de escopo de bloco. Veja escopo de variável abaixo.

Abaixo da primeira linha de código do arquivo script.js, escreva o código abaixo. Nele, criamos uma variável do tipo número e atribuímos a ela o valor 5. A linha abaixo da declaração da variável exibe um comando que mostra no console do navegador tudo que está entre os () parênteses.

var numero = 5;
console.log(numero);

Para acessar o console do navegador, faça o seguinte:

  • Clique com o botão direito no navegador;
  • escolha inspecionar;
  • escolha a tab console;

Agora você pode ver o número 5 impresso no console. Que tal fazermos um teste? Mude o valor da variável número para 10. Aperte F5 no navegador. Agora o console exibe o número 5.

Concatenando variáveis

É possível concatenar (juntar) os valores de duas variáveis através do sinal +. Copie o código abaixo em seu arquivo script.js.

var minhaString = ‘Minha string ‘;
var minhaInt = 25;
var concatenando = minhaString + minhaInt;
console.log(concatenando);

Repare que o console exibe Minha String 25, o valor das duas primeiras variáveis concatenadas e atribuidas à variável concatenando.

Tipos de Dados

O tipo de dado de uma variável é o método de interpretação que o motor JavaScript do navegador utiliza para detectar o valor atribuído à uma variável. Existem seis tipos de dados que podem ser atribuídos à uma variável JavaScript. Segundo o site TEO, são eles:

  • String: quase qualquer valor entre aspas simples ou aspas duplas;
  • Numérico: números;
  • Booleano: true (verdadeiro) ou false (falso);
  • Array;
  • Objeto;
  • Função.

Abaixo temos os tipos de dados acima mencionados exemplificados:

Os tipos de dados String, Numérico e Booleano são tipos de dados Primitivos. Um primitivo (valor primitivo, tipo de dados primitivo) é um dado que não é representado através de um Objeto e, por consequência, não possui métodos.

Na maior parte do tempo, um valor primitivo é representado diretamente através do mais baixo nível da implementação de uma linguagem.

No JavaScript, existem 6 tipos primitivos:

  • String
  • Number
  • Boolean
  • Null
  • undefined
  • Symbol (novo no ECMAScript 6)

Todos os primitivos são imutáveis (não podem ter o seu valor modificado).

Bem povo, ficamos por aqui, porque artigos longos demais são cansativos. Se você gostou deixa um comment aí em baixo. Não esquece de compartilhar o artigo para dar aquela força o/.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *