Java script Básico

O que realmente é JavaScript

JavaScript é uma linguagem de programação que pode ser aplicada em um documento HTML e usada para criar dinâmicas interativas em sites. Ela foi inventada por Brendan Eich, co-fundador do projeto Mozilla, da Fundação Mozilla e das Corporações Mozilla.

Você pode fazer muita coisa com JavaScript. Você vai começar com coisas simples como ajustar layouts, fazer coisas acontecerem quando botões são clicados, sliders e galerias de imagem — mas eventualmente na medida que você ganhar experiência com a linguagem, você poderá criar jogos, animações em 2D e 3D, aplicativos com base de dados desenvolvidas, e muito mais.

JavaScript é por si só uma linguagem compacta, mas é muito flexível, e desenvolvedores tem escrito um monte de ferramentas para que você possa ter acesso a um monte de funcionalidades extras com pequeno esforço. Essas incluem:

• Application Programming Interfaces (APIs) construídas em web browsers que permitem fazer tudo sobre criar HTML e estilos de CSS, para pegar e manipular um stream de vídeo da webcam de um usuário, ou gerar gráficos 3D e amostras de áudio.
• 3rd party APIs que permitem aos desenvolvedores incorporarem funcionalidades em seus sites de outras propriedades, como Twitter ou Facebook.
• 3rd party frameworks e livrarias que você pode aplicar em seu HTML para permitir que você construa rapidamente sites e aplicações.

Um exemplo "hello world"

A sessão abaixo soa excitante, e de fato o é — JavaScript é uma das tecnologias web mais excitantes, e quando você começar a ficar bom nisso, seus sites vão entrar em uma nova dimensão de poder e criatividade.

NO ENTANTO, JavaScript é um pouco mais difícil de ficar confortável do que HTML e CSS, e você terá que começar devagar e continuar trabalhando em pequenos passos. Para começar, nós vamos mostrar a você como adicionar algum Javascript realmente básico para sua página, para criar um exemplo "hello world!"

.

1. Primeiro, vá na sua página de teste e crie um novo arquivo chamado main.js. Salve na sua pasta scripts.
2. Depois, vá no seu arquivo index.html e entre o seguinte conteúdo em uma nova linha antes da tag de fechamento </body>:

   <script src="scripts/main.js"></script>

3. Isso é basicamente o mesma coisa que o elemento <link> para CSS — ele aplicar o JavaScript na página, para que ela tenha efeito no HTML (e CSS, e o que mais aparecer na página).
4. Agora adicione o seguinte código no arquivo main.js:

   var myHeading = document.querySelector('h1');
   myHeading.innerHTML = 'Hello world!';

5. Agora tenha certeza que seus arquivos HTML e Javascript estão salvos, e carregue o index.html no seu browser. Você deve ver algo do tipo:

O que aconteceu?

Então seu cabeçalho mudou para "Hello world!" usando JavaScript. Nós fizemos isso usando uma função chamada querySelector() para pegar uma referência do nosso cabeçalho e armazená-la em uma variável chamada myHeading. Isso é similar ao que fizemos em CSS usando seletores — nós queremos fazer algo a um elemento, então precisamos selecioná-lo primeiro. Depois disso, nós indicamos o valor da propriedade myHeading innerHTML (que representa o conteúdo do cabeçalho) para "Hello world!".

Variáveis

Variables são caixas nas quais você armazena valores. Você começa declarando uma variável com a palavra-chave var, seguida por qualquer nome que você queira chamá-la:

var myVariable;Depois de declarar uma variável, você pode dar a ela um valor:

myVariable = 'Bob';

Você pode retornar o valor chamando a variável pelo nome:

myVariable;

Você pode fazer as duas operações na mesma linha se você quiser:

var myVariable = 'Bob';

Depois de dar à variável um valor, você pode mudá-lo:

var myVariable = 'Bob';
myVariable = 'Steve';

Note que as variáveis tem diferentes tipos de dados:

Variáveis	Explicação	Exemplo
String	Um valor para um texto. Para mostrar que a variável é um texto, você deve envolvê-la em aspas.	var myVariable = 'Bob';
Number	Um número. Números não tem aspas ao redor deles.	var myVariable = 10;
Boolean	Um valor Verdadeiro/Falso. A True/False value. true/false são palavras especiais em JS e não precisam de aspas.	var myVariable = true;
Array	Uma estrutura que permite o armazenamento de vários valores em uma mesma referência.	var myVariable = [1,'Bob','Steve',10]; Call each member of the array like this:myVariable[0], myVariable[1], etc.
Object	Basicamente, qualquer coisa. Tudo em JavaScript é um objeto e pode ser armazenado em uma variável. Tenha isso em mente enquanto aprende.	var myVariable = document.querySelector('h1'); All of the above examples too.

Então por que nós precisamos de variáveis? Bom, variáveis são necessárias para fazer tudo em programação. Se os valores não puderem mudar, então você não poderá fazer nada dinâmico, como personalizar uma mensagem de boas-vindas para o usuário que visita seu site, ou mudar a imagem mostrada em uma galeria de imagens, etc.

Comentários

Você pode colocar comentários em códigos JavaScript, assim como pode em CSS. Em JavaScript, linhas simples de comentário são escritas assim:

// This is a comment

Mas você também pode usar o código CSS para comentários multi linha:

/*
This is a multi line
comment
*/

Operadores

Um operator é basicamente um símbolo matemático que pode atuar em dois valores (ou variáveis) e produzir um resultado. Na tabela a seguir, você pode ver alguns dos operadores mais simples, com alguns exemplos para tentar em seu console de browser.

Operator	Explanation	Symbol(s)	Example
adição/concatenação	Usado para somar dois números ou juntar duas strings.	+	6 + 9; "Hello " + "world!";
subtrair, multiplicar, dividir	Essas fazem o que você espera que elas façam na matemática básica.	-, *, /	9 - 3; 8 * 2; // multiply in JS is an asterisk 9 / 3;
operador de atribuição	Você já viu essa: ela associa um valor a uma variável.	=	var myVariable = 'Bob';
Operador de identificação	Faz um teste para ver se dois valores são iguais um ao outro, retornando um resultado true/false (boolean).	===	var myVariable = 3; myVariable === 4;
Negação, não igual	Geralmente usados ao lado do operador de Igualdade, o operador de negação é o equivalente em JS ao lógico NOT — torna true um false, etc.	!, !==	A expressão básica é true, mas a comparasão retorna false porque nós a negamos: var myVariable = 3; !myVariable === 3; Aqui nós estamos testando "émyVariable NOT igual a 3". Isso retorna false, porque isso É igual a 3. var myVariable = 3; myVariable !== 3;

Há muito mais a explorar, mas pararemos por aqui. Veja Expressions and operators para uma lista completa.

Nota: Misturar tipos de dados pode levar a resultados estranhos quando um cálculo é feito, então tome o cuidado de declarar suas variáveis corretamente, e você terá os resultados esperados. Por exemplo, digite "35" + "25" no seu console. Por que você não teve o resultado esperado? Porque as aspas transformam os números em textos — você acabou contatenando as strings, e não somando os números. Se você digitar 35 + 25, terá o resultado desejado.

Condicionais

Conditionais são estruturas de código que te permitem testar se uma expressão retorna verdadeiro ou não, e então executam diferentes linhas de código dependendo do resultado. A forma mais comum de condicional é chamada if ... else. Então, por exemplo:

var iceCream = 'chocolate';
if (iceCream === 'chocolate') {
  alert('Yay, I love chocolate ice cream!');    
} else {
  alert('Awwww, but chocolate is my favorite...');    
}

A expressão dentro do if ( ... ) é o teste — ela usa o operador de identificação (como descrito anteriormente) para comparar a variável iceCream com a string chocolate para ver se elas são iguais. Se essa comparação retorna true, execute o primeiro bloco de código. Se não, pule esse código e execute o segundo bloco depois do comando else.

Funções

Functions são uma maneira de encapsular funcionalidades que você tem que usar mais de uma vez, então você pode chamar aquela função com um nome simples de função, e não reescrever todo o código de novo e de novo a cada vez que você quiser usá-lo. Você já viu algumas funções, por exemplo:

1. var myVariable = document.querySelector('h1');

2. alert('hello!');

Essas funções são construídas no browser para você usar quando quiser.

Se você vê algo que parece com um nome de variável, mas com parênteses — () — depois disso, provavelmente é uma função. Funções geralmente tem arguments — pedaços de dados que eles precisam para fazerem o trabalho delas. Esses são colocados dentro dos parênteses e separados por vírgulas se houver mais de uma.

Por exemplo, a função alert() fazer com que uma caixa pop-up apareça dentro da janela do browser, mas nós precisamos de dar a ela um string como um argumento para dizer qual mensagem deve ser escrita na caixa pop-up.

A nóticia boa é que você pode definir suas próprias funções — no próximo exemplo nós escrevemos uma função simples que toma 2 números como argumentos e os multiplica:

function multiply(num1,num2) {
  var result = num1 * num2;
  return result;
}

Tente rodar o código acima no console, e então tente usar sua nova função algumas vezes. Por exemplo:

multiply(4,7);
multiply(20,20);
multiply(0.5,3);

Nota: O comando return diz ao browser para retornar a variável resultado da função para que ela esteja disponível para uso. Isso é necessário porque as variáveis definidas dentro das funções estão disponíveis dentro dessas funções. Isso é chamado scoping de variável (leia mais sobre delimitação de variável aqui.)

Eventos

Para criar interatividade em um site, você tem que usar eventos — estruturas de código que percebem as coisas que acontecem no browser e permitem que você rode um código em resposta a essas coisas acontecendo. O mais óbvio exemplo é o click event, que é disparado pelo browser quando o mouse clica em algo. Para demonstrar isso, tente entrar com o código no seu console, e depois clique na página:

document.querySelector('html').onclick = function() {
    alert('Ouch! Stop poking me!');
}

Há muitas maneiras de associar um evento a um elemento; aqui estamos selecionando o elemento HTML e fazendo sua propriedade onclick igual a uma função anônima que contem o código que nós queremos rodar quando o clique ocorrer.

Note que

document.querySelector('html').onclick = function() {};

é equivalente a

var myHTML = document.querySelector('html');
myHTML.onclick = function() {};

É só uma maneira mais curta de escrever isso.

Dando uma carga no seu site exemplo

Agora que nós revimos o básico de JavaScript, vamos adicionar algumas funcionalidades básicas ao nosso site para te dar as primeiras noções do que é possível.

Adicionando um modificador de imagem

Nessa parte, nós adicionaremos outra imagem no nosso site, e vamos adicionar JavaScript para mudar entre as duas quando a imagem é clicada.

1. Antes de tudo, ache outra imagem que você gostaria que aparecesse no seu site. Tenha certeza que ela tem o mesmo tamanho que sua primeira imagem, ou o mais perto disso possível.
2. Salve a imagem na pasta images.
3. Vá no seu arquivo main.js, e digite o seguinte código JavaScript (se seu hello world em JavaScript ainda estiver lá, delete-o):
    

4. var myImage = document.querySelector('img');
   
   myImage.onclick = function() {
       var mySrc = myImage.getAttribute('src');
       if(mySrc === 'images/firefox-icon.png') {
         myImage.setAttribute ('src','images/firefox2.png');
       } else {
         myImage.setAttribute ('src','images/firefox-icon.png');
       }
   }

5. Salve todos os arquivos e carregue o index.html no browser. Agora quando você clicar na imagem, ela deve mudar para a outra!

Então aqui, nós estamos armazenando uma referência ao nosso elemento de imagem na variável myImage. Depois, nós fazemos o evento onclick dessa variável igual a uma função anônima. Agora, toda vez que esse elemento de imagem é clicado:

1. Nós recuperamos o valor do atributo src da imagem.
2. Nós usamos uma condicional para checa se o valor src é igual ao caminho da imagem original:
   1. Se for, nós mudamos o valor do src para o caminho da segunda imagem, forçando a outra imagem a ser carregada dentro do elemento <image>.
   2. Se não é (significando que já mudou), nós mudamos o valor src de volta ao caminho da imagem original, para mudar ao que era antes.

Adicionando uma mensagem personalizada de boas vindas

Agora nós vamos adicionar um pouco mais de código, para mudar o título da página, incluindo uma mensagem personalizada de boas vindas para quando um usuário realiza sua primeira visita ao site. Essa mensagem de boas vindas vai persistir quando o usuário deixar o site e voltar. Nós vamos ainda incluir uma opção para mudar o usuário e portanto a mensagem de boas vindas aparecerá sempre que necessária.

1. Em index.html, adicione a seguinte linha de código antes do elemento <script>:

   <button>Change user</button>

2. Em main.js, adicione o seguinte código no fim do arquivo, exatamente como está escrito — isso pega referências para o novo botão que adicionamos e para o cabeçalho, e guarda ambos em variáveis:

   var myButton = document.querySelector('button');
   var myHeading = document.querySelector('h1');

3. Agora adicione a seguinte função para criar a saudação personalizada — isso não vai fazer nada ainda, mas usaremos mais tarde:

   function setUserName() {
     var myName = prompt('Please enter your name.');
     localStorage.setItem('name', myName);
     myHeading.innerHTML = 'Mozilla is cool, ' + myName;
   }

   Essa função contem uma função prompt(), que traz uma caixa de diálogo assim como o alert() faz; a diferença é que o prompt() pede ao usuário para inserir algum dado, e guarda os dados em uma variável quando o botão OK é pressionado. Nesse caso, nós estamos pedindo ao usuário para digitar seu nome. Agora, nós invocamos uma API chamada localStorage, o que nos permite guardar dados no browser, e o usa mais tarde. Nós usamos a função setItem() do localStorage's para criar e guardar um item de dado chamado 'name', e relaciona seu valor à variável  myName que contem o nome que o usuário digitou. Finalmente, nós associamos o innerHTML do cabeçalho a uma string, mais o nome do usuário.
4. Agora, adicione esse bloco if ... else — nós podemos escrever esse código de inicialização, assim ele estabelece o aplicativo quando ele abrir pela primeira vez:

   if(!localStorage.getItem('name')) {
     setUserName();
   } else {
     var storedName = localStorage.getItem('name');
     myHeading.innerHTML = 'Mozilla is cool, ' + storedName;
   }

   Primeiramente, esse bloco usa o operador de negação (logical NOT) para checar se o item de dados name existe — se não existir, a função setUserName() roda para criá-lo. Se ele já existir (isso é, o usuário tiver digitado quando visitou o site anteriormente), nós recuperamos o nome guardado usando getItem() e associamos o innerHTML do cabeçalho a uma string, mais o nome do usuário, assim como fizemos dentro de setUserName().
5. Finalmente, coloque o gerenciador de evento onclick no botão, para que quando clicado, ele rode a função setUserName(). Isso permite ao usuário dar um novo nome sempre que quiserem ao pressionar o botão:

   myButton.onclick = function() {
     setUserName();
   }

Agora quando você visitar seu site pela primeira vez, vai te perguntar o nome de usuário e te dar uma mensagem personalizada. Você pode então mudar o nome toda vez que quiser ao pressionar o botão. Como um bonus, porque o nome é guardado dentro de localStorage, ele persiste depois que a janela do site é fechada, então a mensagem personalizada sempre estará lá quando você abre o site novamente!

Fonte : developer.mozilla.org

Video aula: