JavaScript Basico

JavaScript Basico

1. Arrays

   • Array é uma forma de estruturar variáveis enumeradas, classificando por índice. Seria algo como uma variável composta.
     • Exemplo de variável: var a = 1 var b = 2 var c = 3. Exemplo de array: var n = [1, 2, 3,]
     • Outro exemplo de array: var n = Array(); n[1] = 1; n[2] = 2; n[3] = 3;
     • Índices nos arrays não precisam necessariamente ser numéricos, nem sequenciais. Portanto, posso nomear arrays com strings.
     • É possível recuperar arrays indicando a sua posição na variável. Por exemplo: console.log(n[1])
   • O atributo length dos arrays conta a quantidade de índices dentro do array, desde que sejam enumerados e comecem do índice 0.
     • Exemplo: var lista_frutas = ["Banana", "Maçã", "Morango", "Uva"] console.log(lista_frutas.length)
   • Arrays multidimensionais são arrays dentro de arrays, assim aumentando a complexidade do projeto, e ao mesmo tempo, melhora a aplicação em questão
     • Para criar um array dentro de outro, devo apenas informar a variável que contem o array que o índice ira receber outro array
       • EX: var a = []; a[1] = []; a[2] = [];
         • Deste modo, a o índice 1 e 2 da variável "a" receberam arrays vazios.
   • É possível incluir novos elementos tanto no início quanto no final do array, usando métodos do objeto array
     • Para incluir no final, devo usar o método push
       • lista_frutas.push("Laranja")
         • No exemplo, foi adicionado o elemento Laranja no final do array lista_frutas.
     • Para incluir no início do array, devo usar o método unshift
       • lista_frutas.unshift("Laranja")
         • Foi adicionado o elemento Laranja no início do array
   • Do mesmo jeito que adicionamos elementos, também excluímos elementos, usando-se de outros métodos
     • Para excluir no fim do array, devo usar o método pop
       • lista_frutas.pop()
         • Foi excluído o último elemento do array, independente de qual seja
     • Para excluir no inicio do array, devo usar o método shift
       • lista_frutas.shift()
         • Foi excluído o primeiro elemento do array, independente de qual seja
   • Posso pesquisar o índice de um elemento do array usando métodos também. Esse tipo de pesquisa permite a validação de formulários, aplicação de lógica e uma série de fatores
     • Para pesquisar o índice do elemento, devo usar o indexOf seguido do nome do elemento
       • lista_frutas.indexOf("Banana")
         • O índice será 0, pois banana é o primeiro elemento
       • lista_frutas.indexOf("Maracujá")
         • O índice sera -1, pois maracujá não está no array
   • É possível ordenar os elementos de um array usando certos métodos. Os elementos serão ordenados alfanumericamente, portanto devo tomar cuidado ao ordenar números, que deverão usar uma função para calcular a ordem.
     • Para ordenar um array, devo usar o método sort
       • lista_frutas.sort()
         • As frutas foram organizadas em ordem alfabética.
       • lista_numeros.sort()
         • Os números foram ordenados levando em consideração o primeiro algarismo. Normalmente, o numero 17 iria aparecer antes do 3, por exemplo, pois o primeiro caractere do 17, o 1, é menor que 3.
     • Para ordenar números, eu devo passar como parâmetro uma função que retorne o primeiro número subtraído pelo segundo
       • Eu devo passar a função descrita DENTRO do método sort como REFERÊNCIA, para assim ela funcionar e verificar todos os elementos, e os ordenar.
       • function ordenaNumeros(a, b){return a - b}
         • A função irá ler o primeiro elemento(a) e o segundo(b). Caso o resultado seja menor que 0, (a) será organizado antes de (b), e caso seja maior que 0, (b) será organizado antes de (a). Se os valores forem iguais, a ordem será mantida. Se der algum erro, a ordem será undefined
   • Atividade de fixação de arrays concluída!
     • <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JAVASCRIPT</title> <style type="text/css"> </style> </head> <body> <input type="text" id="txt"> <input type="button" value="Adicionar" onclick="adicionar()"> <input type="button" value="Ordenar" onclick="ordenar()"> <script type="text/javascript"> var objetos = ["Cadeira","Impressora","Garfo"] function adicionar(){ var obj = document.getElementById("txt") if (obj.value.length == 0) { alert("Favor inserir um objeto válido") }else if(objetos.indexOf(obj.value) >= 0){ alert("Valor já está contido no índice") obj.value = "" }else{ objetos.push(obj.value) obj.value = "" alert(objetos) } obj.focus() } function ordenar(){ objetos.sort() alert(objetos) } </script> </body> </html>

2. Repetições

   • For...in
     • O método for...in permite percorrer arrays de forma mais organizada, por ele irá percorrer todo o array e quando o valor for undefined ele irá parar a execução
       • var lista = [0, 15, 53, 1, 325, 2, 756] for(var x in lista){ document.write(`chave ${x} valor ${lista[x]} <br>`) }
     • As chaves usando for in não precisam estar enumeradas sequencialmente, podem conter strings, numeros inteiros e flutuantes e até valores boleanos
   • forEach
     • O forEatch destrincha o array, é executado como uma função do array dentro do prototype do mesmo, e não como um laço comum. Ele necessita de um callback para funcionar
     • Os parametros da função devem receber o valor, o índice e o próprio array, nessa ordem. Porém o nome dos parametros não importam
       • var lista = [0, 15, 53, 1, 325, 2, 756] lista.forEach(function(valor, indice, array){ console.log(`valor é ${valor}, indice é ${indice}, array ${array}`) })
       • A função irá acontecer dentro do contexto do forEach, ou seja, seguindo as regras do forEach. Portanto será anonima
     • o forEach atua como o for...in, porém ele percorre no array apenas as chaves numéricas, desconsiderando as outras. Além disso, eu posso encapsular a função de callback do forEach para reultilizar em outros momentos, melhorando a legibilidade do código
   • Questões
     • Questão 1
       • var lista_frutas = Array(); lista_frutas[0] = 'Banana'; lista_frutas[1] = 'Maçã'; lista_frutas[2] = 'Morango'; lista_frutas[3] = 'Uva'; for (var i = 0; i < lista_frutas.length; i++) { document.write(lista_frutas[i]); console.log(lista_frutas[i]) }
     • Questão 2
       • var x = 1; var y = 1; while (x <= 10) { y = 1; while (y <= 10) { console.log(x + ' x ' + y + ' = ' + x * y); document.write(x + ' x ' + y + ' = ' + x * y); y++; } console.log("\n"); document.write(""); x++; }

3. Funções

   • Funções com parâmetros variáveis
     • Muitas vezes teremos funções que receberão parâmetros até infinitamente. Existe uma forma de lidar com esse tipo de função
       • Existe o objeto arguments, que é uma palavra reservada da função. Ele acaba tratando os parâmetros como se fossem arrays, porém de forma mais limitada, apenas para ser possivel a leitura dos dados.
       • Por padrão, os argumentos numéricos serão tratados como números, e as strings como strings, ou seja, usar += para exibir o objeto irá concatenar strings e somar os valores numéricos
         • function soma(){ var resultado = 0 for (var i in arguments){ resultado += arguments[i] } return resultado } console.log(soma(4, 21, 0.154354, "FIM"))

4. Tratamento de erros

   • Hoje é possivel reduzir e reagir aos erros que ocorrem em JS, por meio de controles de tratamento de erros
     • TRY (tente)
       • É um bloco de código onde encapsulamos uma lógica ou requisição que pode dar algum erro
     • FINALLY(Finalizar, finalmente)
       • É o bloco de código onde finalizamos o try, exibindo o que deve ser feito com o possivel erro
     • Catch (pegar)
       • O catch serve para fazer o tratamento do erro. Ele recebe um parâmetro e um bloco de código, e é onde os erros se tornam reativos. É como um if/else para erros
     • Throw (lançar)
       • O throw serve para criar exceções na aplicação, vai de contramão ao desenvolvimento reativo. Ele cria uma instância do erro, e o exibe ao usuário, parando a execução da aplicação.
     • Exemplo com os 4 tratamentos:
       • var video = [] video[1] = [] video[1]["nome"] = "Fullmetal Alchemist" video[1]["categoria"] = "Anime" function getVideo(video){ try{ console.log(video[0]["nome"]) } catch(e){ console.log("O erro aconteceu, e foi tratado aqui") throw new Error("A aplicação parou! Mas calma, estamos cuidando disso!") } finally{ console.log("Sempre passa por aqui") } } getVideo(video)

5. BOM (Browser Object Model)

   • A API BOM permite controlar recursos do navegador em questão, como acessar o histórico, armazenar e acessar cookies, etc...
     • Window
       • <button onclick="abrir()">Abrir Janela</button> <button onclick="fechar()">Fechar Janela</button> ------------------------------------ var janela function abrir(){ janela = window.open("http://www.google.com.br", "Nova_janela", "width=200, height=200") } function fechar(){ janela.close() }
       • O Window é a janela do browser, onde todo o conteúdo é renderizado. O BOM controla tudo no browser, até a API DOM, portanto, BOM tem um nivel maior na hierarquia
       • Referente ao window, podemos usar parametros e métodos que se referem a janela em si, como abrir e fechar, redimensionar, alertas, mover o scroll para certo ponto, etc
     • Screen
       • O screen é referente a tela do browser, e pode controlar os elementos referentes ao HTML, como largura e altura da tela exibindo o documento. Também controla as barras de navegação e de status
       • Posso controlar a responsividade do site, exibindo conteúdos caso for um celular, ou um desktop
     • Location
       • O location controla o endereço no navegador, podendo executar ações caso eu clique em um botão, caso eu passe o mouse em uma parte do site, etc.
       • O location vem a ser útil tratando de propagandas, ou adsense
     • Timing
       • O método timing executa ações baseados em tempos, seja um única vez (setTimeout) ou infinitas vezes (setInterval). Útil para contadores, alertas e até jogos