Capítulo 2Javascript Básico

Aulas em Vídeo

Parte 1/1

Primeiro Código

Tag: script

Permite inserir um código javascript em um página html

tag script no HTML 5

tag script no HTML 4

	<script src="/path/arquivo.js"></script>

faz um link para um arquivo com código JavaScript

Comando: console.log()

Exibe mensagem no console

<script> 
	console.log("mensagem");
</script>

exibe uma mensagem no prompt de comando

CTRL + SHIFT + I -> acessa o console do navegador

Variáveis, Tipos Primitivos de Dados e Caixas de Diálogo

Variáveis

<script> 
	let nome = "joão";
	let idade = "23";
	console.log ("Seu nome é:"+ nome + " sua idade é:" + idade});
</script>

<script> 
	let nome = "joão",
	    idade = "23";
	console.log ("Seu nome é:"+ nome + " sua idade é:" + idade});
</script>

segunda maneira de declarar uma sequência de variáveis

Tipos de Dados

JavaScript possui Tipagem Dinâmica. Isso quer dizer que a linguagem procura tipar a varíavel conforme essa variável receba um conteúdo.

<script> 
	let nome = "joão",
	idade = 23;
	console.log ("Nome é do tipo:"+ typeof(nome));
	console.log ("idade é do tipo:"+ typeof(idade));
</script>

Tipos Primitivos de Dados

Tipos Primitivos de Dados

Boolean	Só pode assumir os valores true e false
Number	contém números (integer, double, float...)
String	contém texto

<script> 
	let podeJogar = true;
	let nome = "josé";
	let nun1 = 1.23;
	let nun2 = 12393939393;
	console.log("podeJogar é do tipo:" + typeof(podeJogar));
	console.log("nome é do tipo:" + typeof(nome));
	console.log("nun1 é do tipo:" + typeof(nun1));
	console.log("nun2 é do tipo:" + typeof(nun2));
</script>

Valores Primitivos

Null	Indica a ausência de um objeto.
Undefined	indica a ausência de um valor.

<script> 
	let variavel1;
	let variavel2 = null;
	console.log("variavel1 = " + variavel1);
	console.log("variavel2 = " + variavel2);
</script>

Método alert()

Mostra uma caixa de diálogo apenas para informar algo.

<script> 
	alert("mensagem pra informar o usuário");
</script>

Método confirm()

Mostra uma janela de confirmação.

<script> 
  let opcao = confirm("Confirma a opção?");
  console.log(opcao);
</script>

Se clicar em OK -> retorna true
Se clicar em Canclar -> retorna false

Método prompt()

Mostra uma janela que pergunta alguma informação ao usuário.

<script> 
  let nome = prompt("Qual é o seu nome?");
  console.log(nome);
</script>

Estruturas Condicionais

if else

O IF é uma estrutura condicional que executa o código, dentro do bloco, se determinada condição for verdadeira. Se for falsa, executa o código dentro de else.

<script> 
let opcao = confirm("Deseja deletar?");
if (opcao == true) {
  console.log("deletar registro....");
} else {
  console.log("cancelar operação....");
}
</script>

Operadores de comparação

fonte: w3schools

Operadores de comparação

fonte: w3schools

Operadores Lógicos

Operador	Utilização	Descrição
OR (||)	(expre1 || expre2)
AND (&&)	(expre1 && expre2)
NOT (!)	!expre1

Operador Ternário '?'

let resultado = condição ? valorSeVerdadeiro : ValorSeFalso;

<script> 
let valor = 500;
let mess = (valor>0) ? 'saldo positivo' : 'saldo negativo';
console.log(mess);
</script>

<script> 
let valor = 200;
let mess = (valor<0) ? 'saldo negativo' : 
    (valor<300) ? 'quase acabando, melhor não gastar':
    (valor<500) ? 'dá pra ir no mercado':
    'saldo positivo';
console.log(mess);
</script>

Estrutura Condicional SWITCH

A condicional switch avalia uma expressão, combinando o valor da expressão para um cláusula case, e executa as instruções associadas ao case.

<script> 
let diaSemana = "domingo"

switch(diaSemana) {
  case 'segunda':
    mess = 'bora começar a semana';
    break;
  case 'sexta':
    mess = 'bora tomar uma';
    break;
  case 'domingo':
    mess = 'bora fazer um churras';
    break;
  default:
    mess = 'dia comum';
}

console.log(mess);
</script>

Arrays

Criando um Array

<script> 
let arr1 = new Array();
let arr2 = [];

arr1 = ['arroz', 'feijão', 'salada', 'bife'];

arr2[0] = 'java';
arr2[1] = 'php'

console.log('arr1 =' + arr1);
console.log('arr2 =' + arr2);
</script>

Array Methods

Método join()

Transoforma um array em uma única String

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
console.log(diaSemana.join())
</script>

Método pop()

Remove o último elemento de um array

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
diaSemana.pop();
console.log(diaSemana);
</script>

Método pop()

Retorna o elemento que foi tirado (último) da array

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
let ultimoDia = diaSemana.pop();
console.log(ultimoDia);
</script>

Método push()

Adiciona um elemento num array

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
diaSemana.push('quinta');
console.log(diaSemana);
</script>

Método shift()

Remove o primeiro elemento de um array

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
diaSemana.shift();
console.log(diaSemana);
</script>

Método shift()

Retorna o elemento que foi tirado (primeiro) do array

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
let ultimoDia = diaSemana.shift();
console.log(ultimoDia);
</script>

Método unshift()

Adiciona um novo elemento (começo) no array

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
diaSemana.unshift('domingo');
console.log(diaSemana);
</script>

Método concat()

Concatena (une) dois arrays

<script> 
let diaSemana = ['segunda', 'terça', 'quarta'];
let diaSemana2 = ['quinta', 'sexta', 'sábado', 'domingo'];
let semana = diaSemana.concat(diaSemana2);
console.log(semana);
</script>

Método slice(arg1,arg2)

Cria um array com uma parte de outro array

<script> 
let semana = ['segunda', 'terça', 'quarta','quinta', 'sexta', 'sábado', 'domingo'];
let fimDeSemana = semana.slice(5,7);
console.log(fimDeSemana);
</script>

Strings

Como criar uma string

<script> 
let frase1 = "aqui está um texto";
let frase2 = 'aqui está outro texto';
console.log(frase1);
console.log(frase2);
</script>

<script> 
let frase1 = "aqui está 'destaque' um texto";
let frase2 = 'aqui está "destaque"  texto';
console.log(frase1);
console.log(frase2);
</script>
	

<script> 
let frase1 = aqui está um texto;
console.log(frase1);
</script>
	

Ocorrerá um erro
Todas as palavras que não estão entre aspas serão entendidas como o nome de uma variável, palavra reservada...

Concatenação de Strings

<script> 
let dia = 12;
let ano = "1999";
let data = dia + " de Julho de " + ano;
console.log(data);
</script>
	

Objeto String

Ao criarmos uma variável string, O JavaScript irá transformá-la em uma instância do objeto String.

Esse objeto tem uma série de métodos. Alguns deles nós estudaremos aqui.

Método length()

Informa o tamanho da String

<script> 
let frase = "...e os peixes de lá gritraram ..."
console.log(frase.length);
</script>

Método charAt(x)

Retorna o caractere da posição "x"

<script> 
let frase = "Os peixes de lá gritraram ..."
console.log(frase.charAt(1));
</script>

Método indexOf(substr,[start])

Procura e, se encontra, retorna a posição do caractere ou subtring encontrada.

<script> 
let frase="O mar está para peixe"
procura = frase.indexOf("peixe");
if ( procura != -1 ){
  console.log('tem peixe');
  console.log('posição: ' + procura );
} else {
  console.log('nada de peixe');
}
</script>

Método lastIndexOf(substr,[start])

Procura e, se encontra, retorna a posição do caractere ou subtring encontrada.

A procura é feita do fim para o começo da string.

<script> 
let frase="Feliz Aniversário";
procura1 = frase.indexOf("i");
procura2 = frase.lastIndexOf("i");
console.log('posição: ' + procura1 );
console.log('posição: ' + procura2 );
</script>

Método replace(str1,str2)

Substititui "str1" por "str2"

<script> 
let frase = 'Não, isso não vale não.';
let novaFrase = frase.replace('não', 'sim');
console.log(novaFrase);

let outraFrase = frase.replace(/não/g,'sim'); 
console.log(outraFrase);

let outraFrase2 = frase.replace(/não/gi,'sim'); 
console.log(outraFrase2);
</script>

Método split(delimiter, [limit])

Divide a String em um array de acordo com um separador.

<script> 
let frase = 'Veja a lista: maça, banana e abacate';
let novaFrase = frase.split(':');
console.log(novaFrase);

let feira = "alface maça tomate laranja goiaba";
let sacola = feira.split(" ");
console.log(sacola);
</script>

Método substr(start, [length])

retorna os caracteres em uma string começando em "start" e indo até "length"

<script> 
let frase = 'A empresa conseguiu monitorar o escopo';
let novaFrase = frase.substr(5,20);
console.log(novaFrase);
</script>

"pegue 20 caracteres começando na posição 5"

Método substring(from, [to])

Retorna os caracteres contidos entre o "from" e o "to".

<script> 
let frase = 'A empresa conseguiu monitorar o escopo';
let novaFrase = frase.substring(5,25);
console.log(novaFrase);
</script>

"pegue 20 caracteres começando na posição 5"

Estruturas de Repetição

WHILE

<script> 
let i = 0;
while (i < 3) { 
  console.log(i);
  i++;
}
</script>

No comando while a condição é testada antes do bloco de instruções, e caso a condição seja falsa a repetição não será executada

do ... while

<script> 
let i = 10;
do { 
  console.log(i);
  i++;
} while (i < 3); 
</script>

No do…while o bloco de comandos é executado pelo menos uma vez de forma obrigatória, independente do resultado da expressão lógica

for

<script> 
for (let i = 0; i  < 3; i++) { 
	console.log(i);
  }
</script>

Trabalhando com o objeto Date()

Objeto Date()

let data = new Date()

Primeiro é importante saber que o Date() representa o número de milisegundos desde 1 de janeiro de 1970

<script> 
let data = new Date();
console.log(data);
console.log(data.getTime());
</script>

o método getTime() retorna o número de milisegundos ocorridos desde 1/1/1970 até a data atual

Construtor

<script> 
	let data = new Date();
	let data2 = new Date(02090478476723);
	let data3 = new Date("2022-02-10T23:30:00-03:00");
	let data4 = new Date('2022', '02', '10')
	let data5 = new Date('2022', '02', '10', '09','30','00');
</script>

dataString

o Problema do Dia - dataString

<script> 
   let data = new Date("2022-02-10");
</script>

Como a hora não foi setada, irá assumir: dia 10 - meia noite (00:00)

Como estou no fuso horário -03:00, o sitema irá entender 3 horas antes da meia noite

apesar de ter informado dia = 10, o sistema irá armazenar dia = 9

SOLUÇÃO 1

Digitar a dataString no formato completo:

<script> 
	let data = new Date("2022-02-10T23:30:00-03:00");
</script>

SOLUÇÃO 2

pegar o "número de milisegundos" da data que se quer criar e, a partir disso, criar a data

<script> 
	let data = Date.parse("2022/02/10");
	let data2 = new Date(data);
	console.log(data2);
</script>

Método .Parse() = retorna o "timestamp" de uma string ("YYYY/MM/DD")

SOLUÇÃO 3

Criar a data com utilizando outro construtor

<script> 
	let data = new Date(2022,01,10);
	console.log(data);
</script>

Note que mês=1 = fevereiro

Acessando atributos da Data

<script> 
	//data de hoje = 07/07/2020
	let data = new Date();
	let ano = data.getFullYear();
	let mes = data.getMonth() + 1;
	let dia = data.getDate();
	console.log('a Data de hoje: '+ dia + '/' + mes + '/' + ano);
</script>

Setando atributos da Data

<script> 
	//data de hoje = 07/07/2020
	let data = new Date();
	data.setMonth(8);
	data.setFullYear(2022);
	let ano = data.getFullYear();
	let mes = data.getMonth() + 1;
	let dia = data.getDate();
	console.log('a Data de hoje: '+ dia + '/' + mes + '/' + ano);
</script>

Funções

Como declarar uma função

Escopo de variáveis

Escopo de variáveis

Uma variável declarada dentro de uma função não é visível fora dela.

Escopo de variáveis

Uma função pode acessar variáveis de fora ("externas").

OBS: isso, apesar de possível, não é uma boa prática

Escopo de variáveis

Default values