01 – Javascript – Introdução ao javascript

Aula 01 – Javascript – Introdução ao javascript

Javascript é uma linguagem que todos os desenvolvedores Web devem conhecer bem.

Obs. Javascript não tem nada haver com Java, são duas linguagens bem diferentes.

Introdução ao javascript

Introdução ao javascript

Voltar para página principal do blog

Todas as aulas desse curso

Aula 02

Se gostarem do conteúdo dêem um joinha 👍 na página do Código Fluente no
Facebook

Link do código fluente no Pinterest

Meus links de afiliados:

Hostinger

Digital Ocean

One.com

Introdução ao javascript

Javascript é uma linguagem de programação dinâmica, isto é, uma linguagem de script.

Ela é leve, ou seja, não consome muita memória e possui uma sintaxe e recursos relativamente simples.

É orientada a objetos, multiplataforma, pois pode ser usada em vários sistemas, não só para desenvolvimento web.

Javascript é uma das três tecnologias mais usadas no desenvolvimento web, junto com css e html.

O html é responsável pelo conteúdo em si (títulos, parágrafos, cabeçalhos, etc.), o css pela formatação (cores, fonts, tamanho na tela, etc.), ou seja, a apresentação.

O Javascript possibilita fazer páginas dinâmica, que reagem com efeitos interativos, ele fornece ações reativas nos componentes da página.

Sua especificação é chamada de ECMAScript.

Javascript é fracamente tipada (weak typing), ou seja, você não precisa definir antes o tipo da variável (int, float, string, etc.), então, um código como esse abaixo, executa sem nenhum problema.

var x = "Maria";
var y = 12;
alert(x + y);

Saída:

Maria12

O javascript roda principalmente no browser do usuário, ou seja, no lado do cliente (client-side).

Mas pode ser executado também no servidor ou, na verdade, em qualquer dispositivo que tenha um programa interpretador JavaScript.

Muitos programas desktop e servidores usam JavaScript. O Node.js é o mais conhecido.

Alguns bancos de dados, como o MongoDB e o CouchDB, também usam JavaScript como linguagem de programação.

A linguagem foi inicialmente criada para “tornar as páginas da web vivas”.

Os scripts são feitos e executados como arquivo de texto simples.

Não precisa de preparação ou compilação especial para serem exibidos.

Mãos a obra.

Crie uma pasta como por exemplo: javascript_codes/exemple01/ e dentro crie o arquivo index.html com conteúdo abaixo: 


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aula 1: Fundamentos da Linguagem JavaScript - código fluente</title>
    </head>

    <body>
        <h1>Aula 1: Fundamentos da Linguagem JavaScript - código fluente</h1>
    </body>
    <script>
        console.log('Olá mundo!');
    </script>
</html>

Abra a página no browser, vá em ferramentas de desenvolvedor no browser e depois escolha console.

Você verá o print Olá mundo! no console.

Vamos agora fazer uma outra experiência, vamos colocar o script em um arquivo separado, fora do html.

Crie na mesma pasta javascript_codes/exemple01/ um arquivo chamado script.js e coloque nele.

console.log('Olá mundo!!!');

 

 Agora modifique o index.html.


<!DOCTYPE html>
<html lang="en">
     <head>
        <meta charset="UTF-8">
        <title>Aula 1: Fundamentos da Linguagem JavaScript - código fluente</title>
    </head>

    <body>
        <h1>Aula 1: Fundamentos da Linguagem JavaScript - código fluente</h1>
    </body>
    <script src="script.js"></script>
</html>

Veja no console do browser o mesmo resultado.

Vamos falar de variáveis agora, variável é um conceito fundamental em qualquer linguagem de programação.

Foi falado anteriormente que Javascript é fracamente tipada (weak typing), diferente de C, Java, entre outras, que você precisa definir o tipo da variável antes de guardar qualquer valor nela, seja um número inteiro, um tipo float, uma string, etc.

Para saber mais sobre tipos de variáveis: int, float, double, string, char… Aconselho a assistirem as aulas do curso de programação em C:

http://www.codigofluente.com.br/algoritmo-programacao/linguagem-de-programacao-c/

Uma variável nada mais é do que um recipiente em que colocamos algum valor para poder processar alguma coisa, algum dado.

Para declarar uma variável no Javascript é bem simples, é só utilizar a palavra var antes do nome da variável, mas, se quiser que seja uma variável global, é só omitir o var antes da declaração da variável.

Se não usar o var antes da declaração da variável, ele será uma variável global.
nome_global = "Variável Global";

Usando o var antes da declaração da variável, ele será uma variável local.
var nome_local = "Variável Local";

A variável nome_global e nome_local são pedaços da memória do computador que estão guardando as strings: Variável Global e Variável Local respectivamente.

Poderíamos ter usado aspas simples nos valores das strings que também funcionaria.

Vamos criar agora a variável nome no console, apenas para testar:

var nome = "João";

Agora a sobrenome:
var sobrenome = "da Silva";

Variável idade:

var idade = 50;

Veja que idade é um tipo diferente de dado, é um dado numérico.

Então, vamos aproveitar para falar dos tipos de dados primitivos do Javascript.

Javascript tem 5 tipos diferentes de tipos de dados.

  • Numérico: números reais tipo float, decimais e inteiros.
  • String: sequência de caracteres, usada para textos.
  • Boolean: para dados lógicos, que podem ser apenas verdadeiro(true) ou Falso(false).
  • Underfined: tipo de dados para variáveis que não tem nenhum valor ainda.
  • Null: para dados não existentes.

Os números em Javascript são sempre ponto flutuante, isto é, tipo float, mesmo que as vezes não pareça, mesmo sem que nós os definamos.

Por exemplo: 5 é 5.0

Na maioria das linguagens, temos tipos diferentes para inteiros, decimais, ponto flutuante, mas, em Javascript não.

Javascript é tipado dinamicamente, isso quer dizer que não precisamos definir que tipo de dado será colocado em uma variável, o próprio Javascript descobre automaticamente se é um número, um texto, um booleano, se é indefino, etc.

Voltando ao código, vamos criar a variável estadoCivil:

var estadoCivil = false;

Coloque no javascript_codes/exemple01/script.js todas as variáveis que criamos anteriormente no console.


var nome = "João";
var sobrenome = "da Silva";
var idade = 50;
var estadoCivil = false;
console.log(nome)
console.log(sobrenome)
console.log(idade)
console.log(estadoCivil)

A convençao de nomes de variáveis é camel case, ou seja, variáveis com mais de um nome, por exemplo, estadoCivil, começa com letras minúsculas e cada palavra nova inicia com maiúscula.

Vamos criar outra variável no javascript_codes/exemple01/script.js chamada profissao, sem atribuir nenhum valor a ela.

var nome = "João";
var sobrenome = "da Silva";
var idade = 50;
var estadoCivil = false;
var profissao
console.log(sobrenome)
console.log(idade)
console.log(estadoCivil)
console.log(profissao)

Agora vamos definir um valor para a variável profissão no javascript_codes/exemple01/script.js:


var nome = "João";
var sobrenome = "da Silva";
var idade = 50;
var estadoCivil = false;
var profissao;
profissao = "Médico";
console.log(sobrenome);
console.log(idade);
console.log(estadoCivil);
console.log(profissao);
if (estadoCivil)
    console.log(nome + " " + sobrenome + " é casado")
else
    console.log(nome + " " + sobrenome + " é solteiro")

Existe algumas coisas que não podemos fazer com nomes de variáveis, por exemplo, teste no console do browser:

var 5anos = 5;

Isso dará erro porque variáveis não podem começar com números.

Para corrigir isso, podemos usar um underscore ou sinal de dolar, por exemplo:

var _5anos = 5;

Outra violação das palavras chave e símbolos reservados da linguagem seria:

var toti/cavalcanti = "Toti Cavalcanti";

Outros exemplos:

var function = 5342;

var delete = 5342;

var if = 5342;

Voltar para página principal do blog

Todas as aulas desse curso

Aula 02

Curta a página do Código Fluente no Facebook
https://www.facebook.com/Codigofluente-338485370069035/

Vou deixar meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro link é da one.com:

One.com

Obrigado, até a próxima e bons estudos. 😉

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>