## Playlist: Javascript
**nome:** Patricia Oliveira Paulino
**número:** 37
**turma:** INFO D
*Introdução videos de 1 a 3*
**JavaScript:** geralmente usada em front-end porem esta sendo ultiizada para criar programas back-end também.
**Java:** geralmente usada em back-end.
Quando criamos uma variavel, não precisamos falar de qual tipo essa variavel é (tipagem fraca), podendo guardar, números, textos, e outras informações como verdadeiro ou falso ou valores que possuem data e hora.
EX:
var numero = 10;
var decimal = 10.5;
var nome = "Bruno";
var opcao = true;
var hoje = new Date();
A linguegem javascript é uma linguagem dinamica, o que significa que em um momento a variavel pode estar guardando um numero, em outro em texto e assim por diante (tipagem dinamica).
Na linguagem JS podemos acessar uma variavel pelo seu nome, porem temos que digitar o nome da variavel da mesma forma que ela foi criada (letras maiusculas, minusculas, etc) (key sensitive).
Math.pow
Math.sqrt
JS possue uma certa rigidez em alguns momentos, porém em outros ela se torna mais flexivel.
*Variáveis videos de 4 a 20*
Quando atribuímos valores, eles vem da direita para esquerda
Podemos criar variáveis sem usar a palavra 'var' já que JS é uma linguagem de tipagem fraca. Podemos burlar essa rigidez fraca usando a palavra "use strict", que torna a rigidez mais forte.
Podemos declarar multiplas variaveis usando o 'var' e a virgula.
EX:
var a = 10, b = "oi", c = false, d = new Date();
Podemos declarar as mesmas variaveis sem declarar um valor inicial a elas, que seram retornadas como undefined.
A palavra 'var' só é usada quando criamos uma variavel pela primeira vez, quando alteramos o valor de uma veriavel ela não é utilizada.
console.log();
Podemos chamar uma variavel e cria-la logo abaixo (hoisting). Porém o resultado da variavel será 'undefined'.
EX:
console.log(e);
var e = 10;
Varíaveis podem receber valores primitivos
const = criar constante
var = criar variável
let = criar variável
Constantes:
typeof = operador para identificar o tipo de uma variavel. (number, string, boolean, object.)
number
- valor max
- valor min
Math
- Math.PI
- valores de outros valores que podemos utilizar em outros calculos matematicos
Operadores:
( + ) = soma
( - ) = subtração
( * ) = multiplicação
( / ) = divisão
( ** ) = potencia
( ++ ) = adiciona 1 na variável (incrementação)
( += ) = incrementar um numero em uma variavel
( -- ) = subtraem 1 do valor atual (decrementação)
( -= ) = decrementar um numero de uma variavel
**Valores null e undefined**
Null = objeto
Undefined = variavel nunca obteve um valor
Podemos criar expressões com mais de um calculo matematico no mesmo trecho de código
EX:
var x = 10 * 2 - 2;
var x = 10 * (2 - 2);
Podemos criar contas com varores de variaveis
EX:
var x = 10 + 2;
var a = 10;
x = a +2;
var b = 2;
x = a + b;
x = a + b - 2;
Em variaveis de texto o operador '+' serve para concatenação
EX:
var x = "10" + "2";
"102"
a = "oi ";
b = "Laura!";
x = a + b;
"oi Laura!"
Podemos juntar variaveis do tipo texto com variaveis do tipo numero, tendo assim uma concatenação transformando o valor number em string.
#Conversão
**Conversão para string**
EX:
var a = 10;
var b = String(a);
"10"
ou
b = a.toString();
"10"
**Converção para number**
EX:
var a = "10";
var b = Number(a);
10
ou
b = parseInt(a);
10
*Converte para numero inteiro.*
ou
b = parseFloat(a);
10
*Converte para numero decimal.*
true(number) = 1
false(number) = 0
Nan = quando o valor que que ser convertido para numero, não é um numero.
EX:
b = Number("15najsdj");
NaN
**Converter para boolean**
var a = 1;
var b = Boolean(a);
True
b = Boolean(0);
false
*A unica forma de conversão Bool para falso é o 0*
*textos também podem ser conertidos para bool, porem a unuca forma de conversão para falso são as aspas vazias*
**Converter para data**
Temos que passar primeiro o ano depois o mês e por ultimo o dia.
Para conversão são necessarias 2 etapas.
EX:
var x = "1989-10-22"
var a = Date.parse(x);
625017600000
*Retorna os milisegundos, desde 1970 até a data informada*
var b = new Date(a);
**Conversões automaticas**
O operador '+' nessas converções funciona como concatenção, já oporadores como '-', '/', etc, funcionam com operadores numericos normalmente.
EX:
var x = "15" + 5;
"155"
x = "15" + false;
"15false"
*Convertido para string(concatenação)*
x = "15" - 5;
10
x = "15" * 5;
75
x = "15" / 5;
3
x = "hsg" - 5;
NaN
x = 10 + true;
11
(true em number é igual a 1)
x = 10 + false;
10
(false em number é igual a 10)
*Convertido para number(operações matematicos)*
*Vídeos 21 a 28 Função texto*
- length = retorna a quantidade de caracteres e retorna um numero.
- trim() = remove os espaços do começo e do final.
- toUpperCase() = transforma a string toda em maiusculo.
- toLowerCase() = transt=forma a string toda em minusculo.
**Não alteram a variavel, precisam de outra variavel para altera la**
- indexOf("") = procura um texto dentro de uma variavel retornando o número que esse texto se inicia, sendo a primeira posição sempre o 0 ou uma posição indicada por parâmetro.
- lastIndexOf("") = procura um texto dentro de uma variavel começando de tras para frente.
- charAt(number) = pesquisa o caracter que está na posição indicada.
- charCodeAt(number) = retorna o codigo asc do caractere indicado.
**Podemos passar variaveis**
- replace("", "") = substitui a primeira ocorrencia de um texto por outro, para substituir tudos os caracters usamos a '/' no lugar das aspas e a letra 'g' no final. essa função se preocupa com maiusculo e minusculo para "cancelar" isso usamos o '/' para substituir as aspas e adicionando o caracter 'i' no final.
EX:
- substring(começo, fim) = recorta um texto, recebe 2 paramentros, sendo o 1 o começo e o segundo um caracter depois do fim do texto que desejamos recortar, contando os espaços .
EX:
- substr(começo, quantidade) = recorta um texto, recebe 2 parametros, sendo o 1 o começo e o segundo a quantidade de caracteres que desejamos recortar.
EX:
- split("") = quando queremos transformar um texto em um array, recebe 1 parametro que indica em qual momento irá ocorrer a divisão de itens desse array.
EX:
- join("") = une as palavras novamente, recebe um parametro que informa o que irá unir cada item do array.
EX:
- concat = concatena um texto
EX:
*Vídeos 29 a 32 Função número*
Math = objato
- Math.ceil = arredonda valor numerico do tipo decimal para cima.
- Math.floor = arredonda valor numerico do tipo decimal para baixo.
- toFixed(casas) arredonda pela quantidade de casas decimais desejadas, retorna uma string.
EX:
- Math.pow(base, expoente) = retorna uma potencia.
- Math.sqrt() = raiz quadrada.
- Math.abs() = valor absoluto de uma variavel.
EX:
- Math.max() = identifica qual o maior dos numeros que foi passado.
EX:
- Math.min() = retorna o menos valor que foi passado.
EX:
- Math.random() = gera um numero aleatorio, se quisermos um numero com 1 digito basta multiplicarmos por 10, se quisermos um numero com 2 digitos multiplicamos por 100, e assim por diante.
EX:
*podemos arredondar*
*Videos 33 e 34 Funções data*
- data = informações de data atuais.
- new Date = instanciar variaveis do tipo date.
EX:
**Get = Leitura**
- .getDay() = retorna o dia da semana.
- .getFullYars() = retorna o ano.
- .getDate() = retorna o dia.
- .getHours() = retorna hora.
- .getMiliseconds() = retorna milisegundos.
- .getMinutes() = retorna os minutos.
- .getSeconds() = retorna os segundos.
- .getTime() = retorna o horario.
- .getMonth() = mês (janeiro = 0 ... dezembro = 11).
**Set = alterar**
- .setDate() = alterar o dia.
EX:
- set.Year() = alterar ano.
EX:
- .setMonth() = alterara mês.
**Funções To**
*Retornam a data convertida em string de um forma especifica*
- .toDateString()
- .toLocaleString()
- .toJSON()
*Vídeos 35 a 51 Condição*
*Capacidade do programa de escolher rodar uma linha de codigo ou não*
- if() = se a comparação for verdadeira o comando será executado, essa comparação é feita por um operador relacional. Comando idepedente.
EX:
**Number**
*é possivel comparar uma variavel com outra variavel*
*pode ser usado com chamada de função*
EX:
*podemos realizar mais de uma comparação usando o mesmo comando usando os operadores lógicos*
EX:
*é possivel unir condições com variaveis de tipos diferentes*
*podemos comparar valores de tipos diferentes também*
EX:
- else = caso a comperação seja falsa. É opcional.
EX:
- else if() = realiza uma nova comparação caso a comparação anterior seja falsa. É opcional.
EX:
**Operadores Relacionais**
- (>) = Maior
- (>=) = maior ou igual
- (<) = menor
- (<=) = menor ou igual
- (==) = igual
- (===) = compara se valor e tipo são iguais
- (!=) = diferente
**Operadores Lógicos**
- (||) = ou, se pelo menos uma das comparações forem verdadeiras o comando if será executado, funciona apenas se temos 2 condições ao seu redor.
- (&&) = e, exige que as duas operações sejam verdadeiras para o if ser executado.
- (!) = negação, inverte o false para true
**pype pype**
caso não exista nenhum valor (que convertido para booleano seja verdadeiro) em uma variavel, o valor informado será definido.
EX:
- switch = comparações ou condições
case = valor que será testado.
break = informa o final da função case.
EX:
- default = complemeto do switch (funciona como else)
*Vídeos 52 a 66 Coleção*
São representadas atravez de '[]', e guardam mais de uma variavel.
Colocamos elas entre virgulas
EX:
- push = adiciona mais um item a uma lista.
EX:
- unshift = adiciona um item ao começo de uma coleçao
EX:
- splice = podemos informar a posição que quermos colocar um item(0 é a 1 posição) e se queremos remover um item;
EX:
*Adicionar*
*Remover*
- pop = remove o ultimo item de uma coleção.
- shift = remover o primeiro item de uma coleção.
EXS:
*para ler um item, basta informarmos a posição que ele se encontra.*
EX:
*para alterar uma função basta informar a posição que quer alterar e seu novo valor*
EX:
- isArray = verifica se uma variavel é array ou não
EX:
- of = repetição
- forEach = função repetição
podemos ler mais de um valor usando valores de concatenação ou operações aritimeticas.
- length = retorna a quantidade de itens de um array.
- reverse = ordena de forma decrecente.
- sort = ordena de forma crescente.
- filter = faz uma filtragem em uma coleção apartir de uma condição, gerando uma nova condição com os itens filtrados.
- every = retorna um valor verdadeiro ou falso, se todos os itens correspondem com o indicado.
- some = retorna um valor verdadeiro ou false, se pelo menos um item corresponde com o indicado.
- find = retorna o primeiro item que satisfaz uma coleção, usa operadoras relacionais
EX:
- findIndex = retorna a posição do primeiro item que satisfaz uma coleção
EX:
- map = faz a converção de um array para outro array.
- reduce = passa por cada item de um array aplicando a formula indicada para reduzir esse array.
EX:
*Vídeos 67 a 79 Repetição*
- for = comando de repetição
Possui 3 partes:
A que declara a variável.
Define a condição em que o for vai se repetir.
Incrementa o comando.
*for também pode contar em forma decrescente*
*Pode ser usada em conjunto com uma coleção*
*O comando for pode descobrir cada um dos campos de uma variável do tipo objeto* = usando a variável in
- while = comando de repetição mais abrangente que o for, é baseado em uma condição que pode ser de qualquer tipo contanto que sempre for verdadeira, mas que deve ter um fim para não ser um comando infinito.
- do = comando de repetição, tem como final o while, realiza seus comandos só depois que outros já foram executado.
- continue = pula uma das voltas do comando for.
- break = cancela as repetições.
*Vídeo 80:* No vídeo mostra assuntos que ja vimos anteriormente.
*Vídeo 81:* É possível criar mais de uma função capaz de realizar uma tarefa que pode ser dividida, fazendo com que uma função chame outra função
*Vídeo 82:*
Function somar(a,b) {
let s = a+b;
return s
}
Quando passamos um valor do tipo string e outro de número, não ocorre uma soma, mas sim uma concatenação, juntando os dois valores.
Poré, o mesmo não ocorre com a subtração, ele apenas retoma o número acima, tirando ou ignorando o valor da string.
*Vídeo 83:* Quando ivocamos a função passando mais valores do que a quantidade que está no parâmetro, os valores que estão a mais são desconsiderados/ignorados.
Passando valores a menos, não ocorre nenhum erro, mas retoma NaN, mas se o valor fosse nulo ocorreria a operação.
*Vídeo 84:* Podemos não passar valores nos parâmetros, mas devemos criar argumentos nas posições dos quais são substituídos por números e ocorrerá a operação
*Vídeo 85:* Função contém 3 partes: Nome, parâmetro e retorno.
Variáveis também podem guardar funções.
Função anônima: Função que não possui nome.
*Vídeo 86:* Outra forma de escrever funções anônimas é escrevelas em formato de seta.
*Vídeo 87:*Podemos ver de uma maneira mais limpa, onde uma única linha será reduzida.
*Vídeo 88: Podemos invocar a função no final de sua declaração.
*Vídeo 89:* Quando a variável mesmo dentro da variável objeto que utilizamos para invocar a função seu número também se altera, que continuará com o mesmo valor após a execução.
Quando a alteração dentro da função afeta a variável que foi utilizada para invocar a função damos o nome de passagem por referência, já que não foi uma cópia enviada para a função, e sim o próprio endereço da memória onde esse objeto se encontra, ou seja, quando altera as informações dentro da função de fora.
*Vídeo 90:* Funções também pode receber parâmetros que ao invês de guardar tipos primitivos, podem guarda também funções.
EX: function ima (peso, altura, inquadrado){
let r= peso/inquadrado(altura);
return r;}
const inquad=x => month peso (x,2);
imc (85,18,inquad);
= 26. 2345679....
*Vídeo 91:* No vídeo mostra exemplo de assunto já visto.
EX: function criar dobrado (){
return function (x){
var r= x*2;
}
}
Var dobrado = criar dobrado ();
dobrado (10);
=20
O objeto é formado por um nome e um valor.
*Vídeo 92:* O objado por um nome e valor.
*Vídeo 93:* No vídeo mostra exemplo de assunto já visto.
EX: function criar dobrado (){
return function (x){
var r= x*2;
}
}
Var dobrado = criar dobrado ();
dobrado (10);
=20
O objeto é formado por um nome e um valor.
*Vídeo 92:* A linguagem javascript nos dispinibiliza a possibilidade de criarmos objetos compostos. Para criar um objeto composto basta criar-lo como criamos uma variável normal mas sendo esse objeto composto, vamos representar entre o sinal de chaves, podendo armazenar mais de um par nome e valor.
EX: var pessoa = { nome: "Bruno", altura 1,80}
pessoa; {nome: "Bruno", altura: 1,80}
Para atribuir um valor ao objeto composto utilizamos o sinal de dois pontos separados por vírgula.
*Vídeo 94:* Usando o exemplo acima para acessar um valor dentro de um objeto composto, basta acessar atravéz de caractér ponto. EX: pessoas. nome, o mesmo ocorre com idade.
*Vídeo 95:* podemos também alterar seus valores. EX: pessoas.nome= "fulano", como se fosse uma variável normal.
*Vídeo 96:* um objeto também pode ser um conjunto, ao inves de passarmos posições, para acessar o objeto nome entre aspas.
*Vídeo 97:* também se pode colocar conjunto dentro de objeto composto. Também podemos criar dentro de um objeto composto, um novo objeto composto, basta criamos da mesma forma que já sabemos.
EX: var pessoa= { nome: "Carlos";
idade: 23;
mãe : {
nome: "Maria";
idade: 45;
}
}
invocando: pessoa.mãe.nome
pessoa.mãe.idade;
pessoa["mae"] ["idade"]
*Vídeo 98:* poderiamos criar um novo objeto apenas colocando o novo nome que queremos. EX pessoa.melhor serie="greysanatomy", e podemos ver que o novo campo ou novo objeto melhor serie foi adicionado. Também podemos escluir o objeto criado usando o o "delete".
*Vídeo 99:* um objeto composto pode também ter funções, para criar função basta dar um nome a função que queremos atribuir de forma anônima sem parametros
EX: {nome."Bruno";
idade: 34;
ola:function () {
console. log ("ola!sou a" + this. nome);
}
}
*Vídeo 100:* function: declara funções e objetos.
o objeto com nome: começando com function e dando o nome e passamos quais informações devem ser passadas para criar esse objeto. E dentro ira armazenar os valores que foram enviados por parâmetros. EX:
function pessoa (nome,idade) {
this nome=
this idade=
}
var p= ("Bruno,34").
*Vídeo 101:* No vídeo mostra assuntos que ja foram tratados em outros vídeos.
*Vídeo 102:* No vídeo mostra assuntos que ja foram tratados em outros vídeos.
*Vídeo 103:* Todas as atribuições iniciais são realizadas assim que o objetos é criado.
*Vídeo 104:* Outra forma de criar um objeto: usando o class, mas o nome da função, entre chaves iremos definir as funções do nosso objeto.
EX: class pessoa{
constructor (n,i)
this.nome= n;
thus.idade= i
}
var p= pessoa ("Bruno,34").
*Vídeo 105:* Pra criar um objeto utilizamos a palavra class que constrói a função que é execultada no momento da criação do nosso objeto e é possível adicionar funções do nosso objeto sem a necessidade de escrever a palavra function.
*Vídeo 106:* Existem funções especiais chamadas get e set. Primeiro escrevemos o get ao lado o nome da propriedade, e criando o conteúdo como se fosse uma função normal. Toda função get tem como objetivo retornar uma variável que compõe o objeto. Toda função set a ideia é que ela altera o valor de uma variável que compõe o objetivo.
*Vídeo 107:* A linguagem javascript nos possibilita adicionar funções ou variáveis que guarda um valor a um objeto já rxistente utilizando o conceito de protopype.
*Vídeo 108:* O javascript nos possibilita uma poderosa funcionalidade com objetos criados a partir de class, isso permite que um novo objeto sendo criado perde as funções e variáves que compõe um outro objeto.
*Vídeo 109:* No javascript quando criamos uma variável, ela se torna global. podendo ter dois script, os dois tendo acesso um ao outro.
*Vídeo 110:* Quando introduzimos o conceito de módulo, dizemos que cada arquivo javascripit é um modo independente e que suas informações funções ficam armazenadas apenas dentro desse módulo. Para falar que é um modulo na importação dos arquivos html, iremos adicionar o atributo Type passando o valor módulo(module).
*Vídeo 111:* A linguágem permite que um módulo consiga compartilhar informações com outro módulo, isso acontece por causa do export, que exporta as informações para os outro módulos para ser acessada.
*Vídeo 112:* Podemos também compartilhar informações caso queiramos, basta criar outra variável exporta-la juntamente com outra variável e também acrescentamos ao import e criando o console.log(nome da variavel)
*Vídeo 113:* Podemos exportar funções e objetos
*Vídeo 114:* Outra forma de exportar recursos para outros módulos acessarem, é exportar quando criarmos a variável.
*Vídeo 115:* Uma da maneiras de exportarmos é usando export defaut, e poderemos tirar a chaves no import que está na variavel. Também é possível passar antes do código.
*Vídeo 116:* Contexto na exportação javascript,(também chamado de escopo) nela também temos um contexto de execução global com um objeto global.
*Vídeo 117:* Quando criamos um programa com execuções, dependendo das funções que são executadas, existe um conceito global que possui referência a funções e variaveis criadas.
*Vídeo 118:* Outra forma de vincular um contexto de execução a outro é que quando temos variáveis que ja foram vinculadas a um contexto global e criamos novas funções, novas variáveis e contextos são criados, e esses contextos são vinculados ao contexto global
*Vídeo 119:* Nesse video é feita uma demonstração pratica do video anterior.
*Vídeo 120:* O raciocínio sobre castos de execução é o mesmo quando se trata de objetos criados a partir de dois.
*Vídeo 121:* É mostrado no vídeo a importancia de usar o let ao invez de var quando se está criando uma variável.
*Vídeo 122:* Enquanto programamos, é normal que erros inesperados aconteçam. Para protegermos nosso código contra erro graves, podemos utilizar o comando try dentro dele, que é composto pelo código que queremos executar, depois colocaremos a parte do catch e entre parenteses iremos colocar uma variável que representa o erro , e dentro dele colocaremos qualquer trecho de código que queremos.
{"metaMigratedAt":"2023-06-16T09:00:31.138Z","metaMigratedFrom":"Content","title":"Untitled","breaks":true,"contributors":"[{\"id\":\"d757cf0b-4ece-4c2f-893c-8a075e5d4af3\",\"add\":20881,\"del\":0}]"}