JavaScript é uma linguagem de programação que permite a você implementar itens complexos em páginas web. Toda vez que uma página da web faz mais do que simplesmente mostrar a você informações estáticas, mostrando conteúdo que se atualiza em um intervalo de tempo, mapas interativos ou gráficos 2D/3D animados, etc. Você pode apostar que o JavaScript provavelmente está envolvido. É a terceira camada do bolo das tecnologias padrões da web, duas das quais (HTML e CSS) que já falamos sobre elas por aqui.
Vamos por etapas.
O primeiro passo é criar um arquivo ".js". Então abrindo seu editor de códigos, crie um novo arquivo chamado de script.js(você pode nomeá-lo como quiser, porém não pode faltar o .js no final).
Precisamos conectar nossa página script.js à página HTML. Dentro da tag <body> de sua página html, vamos adicionar uma tag <script> para conectar nosso código JavaScript. É recomendado salvar no final do seu código, somente acima das tags <body> e <html>. Exemplo:
<script src="./script.js"></script>
</body>
</html>Comentários são linhas de códigos não executáveis.
// var texto = "esse código não será executado"/*
var idade = 15
var conseguir = 'você vai conseguir'
*/O código acima não sera executado, pois está dentro de um comentário /* */.
Uma variável é um espaço na memória do computador destinado a um dado. Pode inicar com as palavras var, let e const. Obs: Variaveis podem ser executadas com qualquer nome, exceto se estiver entre esses: Os nomes podem iniciar com $, _, ou letras.
Podem conter números mas não iniciar com eles
Case sensitive
nome é diferente de Nome // Maiscúlo é diferente de minúsculo
Não utilizar palavras reservadas, um link abaixo com todas as palavras reservadas de js. https://www.w3schools.com/js/js_reserved.asp
Palavra chave (var,let ou const) seguida de um nome, sinal de "=" e o valor.
var nome = 'andrew';
let idade = 18;
const estudante = true;var quantidade = 5;
var valor = 20;
var total = quantidade * valor; // Nesse caso retornar 5 * 20 que é : 100;var valor1 = 10;
console.log(++valor1) // 11; o sinal de ++ é conhecido como operador de incremento e soma o 1 a variável `valor1` ou a qualquer outro elemento tipo Number.
// para ver o resultado do console.log. Abra seu arquivo html que está linkado com o .js no navegador, clique com o botão direito do mouse
"inspecionar" e procure por console. Lá ira aparecer o resultado dele.JavaScript possui 7 tipos de dados. Tirando os objetos, todos são primitivos.
var idade = 18; // Number
var nome = 'andrew'; // String
var estudante = true; // Boolean
var time; // Undefined
var null = null; // Null
var simbolo= symbol(); // Symbol
var objeto = {}; // ObejtoPara isso, utilizamos o Typeof().
var time = 'vasco';
console.log(typeof(time)) // StringVão sempre retornar um valor Booleano.
10 < 5 // false; 10 é maior que 5?
7 > 2 // true; 7 é maior que 2?
5 <= 5 // true; 5 é menor ou igual a 5?O && compara se uma expressão e a outra é verdadeira.
o || compara se uma expressão ou a outra é verdadeira.
true && true; // true
true && false; // false; somente uma delas é verdadeira
true || false; // true; Retorna o primeiro valor verdadeiro.
false || false; // false; Nenhuma delas é verdadeira.Estruturas condicionais Javascript são como estruturas condicionais na maioria das linguagens de programação existentes,
as utilizamos para verificar uma condição e definir se algo deve ou não acontecer.
Se não chover hoje, vou jogar bola
Temos uma condição(se não chover) para executar uma ação(jogar bola) dependendo do resultado dessa condição. Se verdadeira, a ação é executada.
var naoChoveu = true;
if(naoChoveu){ // essa linha de código, verefica se a condição passada entre os parenteses é verdadeira.
console.log('vou jogar bola')
}
else{
console.log('ficarei em casa')
}Coloque esse código em seu editor de códigos e veja o resultado.
OBS: faça todos os teste você mesmo, faça exercícios, busque informações e se aprofunde.
Abra seu editor de códigos e em um arquivo .js faça os exercícios abaixo.
// Declare 5 variaveis e descubra o tipo delas
// Declare duas variaveis do tipo number e some elas. Guarde o valor em outra variável.Para informações detalhadas sobre todos os tipos de dados: clique Tipos de Dados
Obs: É recomendado que leia esse artigo para o melhor entendimento do contéudo a seguir!
Funções são blocos de códigos fundamentais em JavaScript. Uma função é um procedimento de JavaScript, um conjunto de instruções que executa uma tarefa ou calcula um valor.
A declaração de função consiste no uso da palavra chave Function.
function multiplicacao(num){
return num * num
}
console.log(multiplicacao(15)); // 225; chamando a função e demonstrando ela no console.
console.log(multiplicacao(2)); // 4;
console.log(multiplicacao(8)); // 64Ao criar uma função, você pode definir o(s) parâmetros.
Ao Executar uma função, você pode definir o(s) parâmetros.
function imc(peso, altura){ // Peso e Altura são parâmetros
const imc = peso / altura * 2
return imc
}
console.log(imc(70, 1.90)) // 70, 1.80 são argumentosUm objeto é uma coleção de dados e/ou funcionalidades relacionadas (que geralmente consistem em diversas variáveis e funções, que são chamadas de propriedades e métodos quando estão dentro de objetos).
var eu = {
nome: 'andrew',
idade: 18,
time:'vasco',
}
console.log(eu) // { nome: "andrew", idade: 18, time = "vasco"}
console.log(eu.nome) // andreweu.nome = 'heitor';eu.profissao = 'front end';Console.log() é um método, utilizado para demonstrar um determinado valor no console do navegador.
var quadrado = {
lados:4,
area: function(lado){
return lado + lado
},
};
console.log(quadrado.lados); // 4
console.log(quadrado.area(4)); // soma 4 + 4 e retorna o 8.Em JavaScript, quase tudo é um objeto. Todos os tipos primitivos, com exceção de null e undefined são tratados como objetos. Eles podem receber propriedades e métodos, e possuem todas as características de objetos.
var nome = 'andrew';
console.log(nome.length) // 6; 6 letras existem no nome andrew
nome.replace("w", "ssa") // andressa; substituiu "w" por "ssa"Abra seu editor de códigos e em um arquivo .js faça os exercícios abaixo.
Obs: Pratique muito JavaScript, isso te ajudará muito durante o aprendizado da linguagem.
// Crie um objeto com seu nome, idade e alguma outra informação
// Substitua o valor de uma propriedade do objeto acima e adicione uma nova
// Crie uma variável string e utilize 3 propriedades ou métodos nela.
// Não sabe? Faça uma rápida pesquisa no google "métodos e propiedades em JS" e teste os que achar.O objeto Array do JavaScript é um objeto global usado na construção de 'arrays'. objetos de alto nível semelhantes a listas.
var times = ["Barcelona", "Manchester United", "Milan"]
console.log(times) // (3) ["barcelona", "manchester united", "Milan"]Para selecionarmos um valor em um array é necessário passar seu índice. Em um Array o primeiro índice é [0], então para chamarmos o primeiro valor do array acima, faremos assim:
times[0]// barcelona;
times[1] // manchester united;
times[2] // Milan;Utilizando o método push
times.push("vasco");
console.log(times); // (4) ["barcelona", "manchester united", "Milan", "vasco"]Utilizando o método pop
times.pop();
console.log(times) // (3) ["barcelona", "manchester united", "Milan"] // removeu o último valor que era o vasco.Um loop faz algo repetidamento até que uma condição seja atendida. Um loop possui 1 ou mais itens dos seguintes itens.
O contador, é inicializado com um determinado valor. Este é o ponto inicial do loop.
A condição de saída, que é o critério no qual o loop para, geralmente o contador atinge um certo valor.
Um iterador, que geralmente incrementa o contador em uma pequena quantidade a cada loop, sucessivamente, até atingir a condição de saída.
for(var i = 1; i < 10;i++){
console.log(i);
}Escopo é a acessibilidade de objetos, variáveis e funções em diferentes partes do código. Em outras palavras, o que determina quais são os dados que podem ser acessados em uma determinada parte do código é o escopo. Imagine que escopo é uma caixa e tudo que for criado nessa caixa pode ser acessado por qualquer objeto dentro da mesma. Um escopo é criado sempre que definimos uma função:
function ola(name){
// isso é um escopo
}Sempre que iniciamos nosso código, o JavaScript cria um escopo global, uma caixa maior para que possamos colocar todas as demais caixas dentro, e quando criamos nossa função hello estamos colocando uma caixa menor dentro do escopo global na qual estamos trabalhando.
function ola(name){
// escopo de ola
function hello(name){
// escopo de hello
}
}Quando criamos outra função dentro da função foo, estamos colocando outra caixa dentro do escopo da função, criando o que é chamado de “nested scopes”, ou escopos aninhados. Todo o escopo é fechado para acessos externos, de forma que escopos superiores não conseguem acessar escopos internos, mas o contrário é permitido.
Variaveis declaradas dentro de uma função não são acessadas fora dela.
function ola(){
var idade = 20
}
console.log(idade) // error: idade is not definedVariáveis criadas com var, vazam o bloco. Por isso com a introdução do ES6 a melhor forma de declarmos uma variável é utilizando const e let, pois estas respeitam o escopo de bloco.
if(true){
var nome = 'andrew';
}
console.log(nome) // andrewIMPORTANTE: Chaves {} criam um escopo de bloco, não confundir com a criação de objetos = {}.
É recomendado utilizar const ou let na declaração de variaveis. Pois elas não vazam o bloco.
if(true){
`const` nome = 'andrew';
}
console.log(nome) // error: nome is not definedMantém o escopo no bloco, impede a redeclaração e impede a modificação do valor da variável, evitando bugs no código.
const nome = 'andrew';
nome = 'davi' // erro, não pode alterar o valor
const nome; // erro, impede a redeclaraçãoMantém o escopo no bloco, impede a redeclaração, mas permite a modificação do valor da variável.
let dia = 19;
++dia;
console.log(dia) // 20;
let dia = 30; // erro, redeclarou a variavel.É uma interface que representa documentos HTML e XML através de objetos. Com ela é possível manipular a estrutura, estilo e conteúdo destes documentos. Um exemplo de como adicionar uma class em uma section por exemplo com o Dom. Você vai ter muito contato com o Dom, ele é essêncial na criação de sites dinâmicos, intereção com o usuário e etc...
var section = document.querySelector('section');
section.classList.add('nome da class que quer adicionar').NOVAMENTE: Faça teste, pesquise, pratique.
Muito bom, se não se importa, copiei para meu Gist e deixei o link do seu oficial no final