Please enable JavaScript.
Coggle requires JavaScript to display documents.
JavaScript e Interatividade na Web (DOM (Para podermos selecionar-nos uma…
JavaScript e Interatividade na Web
O que caralhos é JavaScript?
É uma linguagem de programação onde podemos controlar alguns comportamentos do navegador através de trechos de código que são enviados na página html
Nasceu da Netscape, a criadora de um dos navegadores mais populares dos anos 90, com o nome de LiveScript
A partir dele podemos fazer aplicações web complexas como gmail, youtube, etc
Para podermos testá-la e usá-la sem ter que criar um documento html só para isso, usamos o
console
do navegador
Não precisa usar vírgula aqui :D
Características da linguagem
É uma linguagem interpretada
Possui uma grande tolerância a erros
A tag <script>
É com essa tag que podemos adicionar código JavaScript diretamente em um documento html
Por ser uma linguagem interpretada, sugerimos que adicione essa tag no fim da tag body, com o risco de comprometer o carregamento de sua página caso seja colocada no início
Podemos também usar um arquivo externo, nesse caso, basta adicionar o caminho do arquivo na tag script com o tipo do arquivo no atributo
type
e o endereço do arquivo no atributo
src
Só um adendo: podemos enviar mensagem que só serão visíveis no console com o comando
console.log()
DOM
Document Object Model é uma estrutura que o os navegadores criam das tags html da página para que a gente possa seleciona-las no JavaScript
Essa estrutura pode ser acessada através da variável global
document
Para podermos selecionar-nos uma tag com essa variável, usamos o método
querySelector
Sintaxe:
document.querySelector("[elemento]")
Podemos usar os seletores CSS para escolher um elemento aqui! :D
Podemos também colocar o conteúdo do método
querySelector
em uma variável
Para selecionar mais de um elemento, usamos o método
querySelectorAll
que irá retornar um vetor com os elementos
Quaisquer das atualizações no documento que fizermos aqui, será aplicada em tempo real no navegador
Funções e Eventos com o DOM
Logicamente que não queremos que todo nosso conteúdo de interatividade seja executado quando o documento carrega e pronto, nada isso! Queremos que ao usuário clicar em uma botão, algo aconteça, podemos fazer isso com as funções e eventos
A sintaxe básica de uma função é essa:
function mostraAlerta(){
alert("Funciona!");
}
Para chamar essa função quando ela se faz necessária, escolhemos o elemento que queremos e colocamos nele o evento que queremos que tal função seja executada.
Existem vários tipos de eventos, vou listar alguns deles:
oninput: quando um elemento input tem seu valor modificado
onclick: quando ocorre um click com o mouse
ondblclick: quando ocorre dois clicks com o mouse
onmousemove: quando mexe o mouse
onmousedown: quando aperta o botão do mouse
onmouseup: quando solta o botão do mouse (útil com os dois acima para gerenciar drag'n'drop)
onkeypress: quando pressionar e soltar uma tecla
onkeydown: quando pressionar uma tecla
onkeyup: quando soltar uma tecla
onblur: quando um elemento perde foco
onfocus: quando um elemento ganha foco
onchange: quando um input, select ou textarea tem seu valor alterado
onload: quando a página é carregada
onunload: quando a página é fechada
onsubmit: disparado antes de submeter o formulário (útil para realizar validações)
Exemplo:
var botao = document.querySelector("#botaoEnviar");
botao.onclick = mostraAlerta;
Funções anônimas
São funções específicas somente para um evento, não precisam ter nome e são colocadas dentro do evento/variável que você quer
Sintaxe:
inputTamanho.oninput = function(){
outputTamanho.value = inputTamanho.value;
}
Strings
Uma string não é só uma variável que armazena textos grandes, ela possui alguns métodos muito úteis, vamos dar uma olhada
O método
length
retorna o comprimento de uma string
Já o método
replace
substitui uma parte do texto da string (ou a string toda) por uma outra parte
Uma string é imutável, você só consegue mudar ela se mudar sua variável diretamente
O JavaScript é super de boa em converter outro tipos de dados para string (até números flutuantes :O)
Para concatenar uma string, basta usar o operador de +
Porém se você for concatenar com outros tipos de dados, fique a atento a ordem de procedência para não dar merda!
Números
Além de também ser imutável, é super de boas com conversões também
Um método interessante desse tipo de dado é o método
toFixed
que define o número de casas decimais após a vírgula
Arrays
Array, como você já sabe, é uma variável que pode conter várias outras variáveis
Os arrays em JavaScript podem armazenar mais de um tipo de variável no mesmo array
Sintaxe básica:
var [nome] = [[elementos]]
Para colocar algo no array, podemos usar o método push, para ver algo no array, usamos a notação de vetor normal
Blocos de Repetição
Como toda linguagem que se preze o JavaScript também tem o suporte laços de repetição
Os mais usados são o
for
e o
while
, não precisa explicar o funcionamento deles né? Tome vergonha
Funções temporais
As funções temporais são funções que se executam em certo tempo, após um timer
Uma das funções que fazem isso é a função
setTimeout
, ele recebe como argumento a função que você quer se execute depois do tempo e o tempo em milissegundos
Tem também a função
setInterval
que recebe os mesmos argumentos, porém, ele repete a função colocada a cada intervalo de tempo
Para parar essa repetição, use o método
clearInterval