JavaScript - w3schools.com/js/default.asp - w3schools.com/jsref/default.asp
- Where to
<script></script> -> Inserir entre as tags
<head> ou <body> -> Inserir as tags dentro de um ou outro
<script src="myScript.js"></script> -> Inserir script externo
- Output
innerHTML -> Escrever dentro de um elemento html
document.write() -> Escrever dentro do elemento body
window.alert() -> Mensagem em um alert box
console.log() -> Escreve no console do navegador
- Syntax
Valores fixos são literais e valores variados são variáveis
Comentários -> // ou / /
Identificadores:
- Primeiro character -> letra, _ ou $
JavaScript é case sensitive e por definição lower camel case
- Afirmações
São executadas uma por um
Code blocks dentro de { }
Keywords:
- break -> Termina um switch ou loop
- continue -> Salta um loop e vai para o começo
- debugger -> Para a execução e chama a função de debugging
- do ... while, for -> Loop enquanto a condição é verdadeira
- function -> Bloco reutilizavél
- if ... else -> Bloco de condições
- return -> Retorna o valor e sai de uma função
- switch -> Verifica um caso e varias continções
- try ... catch -> Manipula erros quando ocorrem
- var -> Declara uma variável
- For
- For ... in
- Variáveis
5 Tipos:
- string
- number
- boolean
- object
- function
- Operações
Operadores:
- Afirmação -> =
- Adição -> +
- Multiplicação -> *
- Subtração -> -
- Divisão -> /
- Modulo -> %
- Incremento -> ++
- Decremento -> --
Operações de afirmação -> =, +=, -=, *=, /= e %=
Operações de concatenação -> " " + " "
Operadores de comparação:
- == -> Iqual valor
- === -> Iqual valor e tipo
- != -> Não iqual valor
- !== -> Não iqual valor e tipo
- < -> Maior que
-> Menor que
- <= -> Maior ou iqual que
= -> Menor ou iqual que
- ? -> Operador ternário
Operador lógico:
- && -> And
- || -> Or
- ! -> Not
3 Tipos de objeto:
- Object
- Date
- Array
2 Tipos que não podem conter valor:
- null
- undefined
Operador tipo:
- typeof -> Retorna o tipo da variavel
- instanceof -> Retorna verdadeiro se um objeto for uma instância de um tipo de objeto
Operadores Bitwise:
- & -> AND
- | -> OR
- ~ -> NOR
- ^ -> XOR
- << -> Zero fill left shift
-> Signed right shift
-> Zero fill right shift
Operador delete -> Apaga uma propriedade de um objeto
/ e * tem precedência a + e -
Operador in -> Retorna true se existe no array ou objeto
Operador void -> Avalia uma expressão e retorna undefined.
- Aritmética
Objeto Math -> Usado para operações matemáticas
Métodos Math:
- abs(x) -> Retorna o valor absoluto de x
- acos(x) -> Retorna o arco cosseno de x em radianos
- asin(x) -> Retorna o arco seno de x em radianos
- atan(x) -> Retorna o arco tangente de x
- atan2(y, x) -> Retorna o arctangente do quociente de seus argumentos
- ceil(x) -> Retorna x arredondado para cima para o número inteiro mais próximo
- cos(x) -> Retorna o coseno de x em radianos
- sin(x) -> Retorna o seno de x em radianos
- exp(x) -> Retorna o valor de E^x
- floor(x) -> Retorna x arredondado para baixo para o inteiro mais próximo
- log(x) -> Retorna o logaritmo natural (base E) de x
- max(x, y, z, ..., n) -> Retorna o número com o valor mais alto
- min(x, y, z, ..., n) -> Retorna o número com o valor mais baixo
- pow(x, y) -> Retorna o valor de x para o poder de y
- random() -> Retorna um número aleatório entre 0 e 1
- round(x) -> Arredonda x para o inteiro mais próximo
- sqrt(x) -> Retorna a raiz quadrada de x
- tan(x) -> Retorna a tangente de um ângulo
Os tipos são dinâmicos
- Funções
Syntax:
function name(parameter1, parameter2, parameter3) {
code to be executed
}
Invocar uma função:
- Evento
- Invocado no código
- Automáticamente
- Objetos
Objetos podem conter propriedades ou métodos.
Acessar uma propriedade em um objeto:
- objectName.propertyName
- objectName["propertyName"]
Acessar um método em um objeto:
- objectName.methodName()
Outro objetos: new String(), new Number e new Boolean()
- Scope
Local e global.
Strict Mode -> Em um programa ou função é em um contexto previne certas ações de ser tomado e lança mais exceções
- Strings
Usadas para guardar e manipular texto.
Caracteres especiais:
- \´-> Aspas simples
- \" -> Aspas duplas
- \ -> Barra
- \b -> Barra de espaço
- \f -> Feed de formulário
- \n -> Nova linha
- \r -> Retorno de carro
- \t -> Horizontal tabular
- \v -> Vertical tabular
Podem ser objetos, porém tem baixa performasse e não devem ser usadas. Por exemplo: new String()
String propriedades:
- constructor -> Retorna a função de construtor da string
- length -> Retorna o comprimento de uma string
- prototype -> Permite adicionar propriedades e métodos a um objeto
String métodos:
- charAt() -> Retorna a posição do caractere no índice especificado
- charCodeAt() -> Retorna o Unicode do caractere no índice especificado
- concat() -> Junta-se a duas ou mais strings, e retorna uma nova corda juntada
- endsWith() -> Verifica se uma string termina com string / caracteres especificados
- fromCharCode() -> Converte valores Unicode em caracteres
- includes() -> Verifica se uma string contém a string / caracteres especificados
- indexOf() -> Retorna a posição da primeira ocorrência encontrada de um valor especificado em uma string
- Retorna a posição da última ocorrência encontrada de um valor especificado em uma string
- localeCompare() -> Compara duas strings no local atual
- match() -> Procura uma string para uma partida contra uma expressão regular e retorna as correspondências
- repeat() -> Retorna uma nova string com um número especificado de cópias de uma string existente
- replace() -> Procura uma string para um valor especificado ou uma expressão regular e retorna uma nova seqüência de caracteres onde os valores especificados são substituídos
- search() -> Procura uma string para um valor especificado, ou expressão regular, e retorna a posição da partida
- slice() -> Extrai uma parte de uma string e retorna uma nova string
- split() -> Divide uma string em uma série de substrings
- startsWith() -> Verifica se uma string começa com caracteres especificados
- substr() -> Extrai os caracteres de uma string, começando em uma posição de início especificada e pelo número especificado de personagem
- substring() -> Extrai os caracteres de uma string, entre dois índices especificados
- toLocaleLowerCase() -> Converte uma string em letras minúsculas, de acordo com a localização do host
- toLocaleUpperCase() -> Converte uma string em letras maiúsculas, de acordo com a localização do host
- toLowerCase() -> Converte uma string em letras minúsculas
- toString() -> Retorna o valor de um objeto String
- toUpperCase() -> Converte uma string em letras maiúsculas
- trim() -> Remove espaço em branco de ambas as extremidades de uma string
- valueOf() -> Retorna o valor primitivo de um objeto String
- Numbers
Números são sempre 64-bits de ponto float
NaN (Not a Number) -> Não é um número legal
Infinity (ou -Infinity) -> Retorna se você calcular um número fora do maior número possível.
Hexadecimal -> Exibe números como base de 10 decimais.
Number propriedades:
- constructor -> Retorna a função que criou o protótipo Número do JavaScript
- MAX_VALUE -> Retorna o maior número possível em JavaScript
- MIN_VALUE -> Retorna o menor número possível em JavaScript
- NEGATIVE_INFINITY -> Representa o infinito negativo
- NaN -> Representa um valor "Não-numero"
- POSITIVE_INFINITY -> Representa o infinito
- prototype -> Permite adicionar propriedades e métodos a um objeto
Number métodos:
- isFinite() -> Verifica se um valor é um número finito
- isInteger() -> Verifica se um valor é um número inteiro
- isNaN() -> Verifica se um valor é Number.NaN
- isSafeInteger() -> Verifica se um valor é um número inteiro seguro
- toExponential(x) -> Converte um número em uma notação exponencial
- toFixed(x) -> Formata um número com x números de dígitos após o ponto decimal
- toPrecision(x) -> Formata um número para x comprimento
- toString() -> Converte um número em uma string
- valueOf() -> Retorna o valor primitivo de um número
Number conversão:
- Number()
- parseInt()
- parseFloat()
- Dates
new Date(year, month, day, hours, minutes, seconds, milliseconds) -> Como criar objetos data
Date propriedades:
- constructor -> Retorna a função que criou o protótipo do objeto Date
- prototype -> Permite adicionar propriedades e métodos a um objeto
Date Métodos:
- getDate() -> Retorna o dia do mês (de 1-31)
- getDay() -> Retorna o dia da semana (de 0 a 6)
- getFullYear() -> Retorna o ano
- getHours() -> Retorna a hora (de 0 a 23)
- getMilliseconds() -> Retorna os milissegundos (de 0 a 9999)
- getMinutes() -> Retorna os minutos (de 0 a 59)
- getMonth () -> Retorna o mês (de 0 a 11)
- getSeconds () -> Retorna os segundos (de 0 a 59)
- getTime () -> Retorna o número de milissegundos desde a meia-noite de 1 de janeiro de 1970 e uma data específica
- getTimezoneOffset () -> Retorna a diferença horária entre a hora UTC e a hora local, em minutos
- getUTCDate () -> Retorna o dia do mês, de acordo com o tempo universal (de 1-31)
- getUTCDay () -> Retorna o dia da semana, de acordo com a hora universal (de 0 a 6)
- getUTCFullYear () -> Retorna o ano, de acordo com o tempo universal
- getUTCHours () -> Retorna a hora, de acordo com a hora universal (de 0 a 23)
- getUTCMilliseconds () -> Retorna os milissegundos, de acordo com o tempo universal (de 0 a 9999)
- getUTCMinutes () -> Retorna os minutos, de acordo com a hora universal (de 0-59)
- getUTCMonth () -> Retorna o mês, de acordo com a hora universal (de 0 a 11)
- getUTCSeconds () -> Retorna os segundos, de acordo com a hora universal (de 0-59)
- getYear () -> Deprecated. Use o método getFullYear () em vez disso
- now () -> Retorna o número de milissegundos desde a meia-noite 01 de janeiro de 1970
- parse () -> Analisa uma string de data e retorna o número de milissegundos desde 1 de janeiro de 1970
- setDate () -> Define o dia do mês de um objeto de data
- setFullYear () -> Define o ano de um objeto de data
- setHours () -> Define a hora de um objeto de data
- setMilliseconds () -> Define os milissegundos de um objeto de data
- setMinutes () -> Define os minutos de um objeto de data
- setMonth () -> Define o mês de um objeto de data
- setSeconds () -> Define os segundos de um objeto de data
- setTime () -> Define uma data para um número especificado de milissegundos após / antes de 1 de janeiro de 1970
- setUTCDate () -> Define o dia do mês de um objeto de data, de acordo com a hora universal
- setUTCFullYear () -> Define o ano de um objeto de data, de acordo com o tempo universal
- setUTCHours () -> Define a hora de um objeto de data, de acordo com a hora universal
- setUTCMilliseconds () -> Define os milissegundos de um objeto de data, de acordo com a hora universal
- setUTCMinutes () -> Define os minutos de um objeto de data, de acordo com a hora universal
- setUTCMonth () -> Define o mês de um objeto de data, de acordo com o tempo universal
- setUTCSeconds () -> Define os segundos de um objeto de data, de acordo com o tempo universal
- setYear () -> Deprecated. Use o método setFullYear () em vez disso
- toDateString () -> Converte a parte da data de um objeto Date em uma string legível
- toGMTString () -> Deprecated. Use o método toUTCString () em vez disso
- toISOString () -> Retorna a data como uma string, usando o padrão ISO
- toJSON () -> Retorna a data como uma string, formatada como uma data JSON
- toLocaleDateString () -> Retorna a porção de data de um objeto Date como uma string, usando convenções de localidade
- toLocaleTimeString () -> Retorna a porção de tempo de um objeto Date como uma string, usando convenções de localidade
- toLocaleString () -> Converte um objeto Date para uma string, usando convenções de localidade
- toString () -> Converte um objeto Date para uma string
- toTimeString () -> Converte a porção de tempo de um objeto Date para uma string
- toUTCString () -> Converte um objeto Date para uma string, de acordo com o tempo universal
- UTC () -> Retorna o número de milissegundos em uma data desde a meia-noite de 1º de janeiro de 1970, de acordo com a hora UTC
- valueOf () -> Retorna o valor primitivo de um objeto Date
Time Zones -> Ao definir uma data, sem especificar o fuso horário, o JavaScript usará o fuso horário do navegador.
4 Tipos:
- ISO Date
- Short Date
- Long Date
- Full Date
- Arrays
Armazena múltiplos valores em uma variável
Array propriedades:
- constructor-> Retorna a função que criou o protótipo do objeto Array
- length -> Define ou retorna o número de elementos em uma matriz
- prototype-> Permite adicionar propriedades e métodos a um objeto Array
Array métodos:
- concat () -> junta dois ou mais arrays, e retorna uma cópia das matrizes juntas
- copyWithin () -> Copia elementos da matriz dentro da matriz, para e de posições especificadas
- every () -> Verifica se cada elemento em uma matriz passa um teste
- fill () Preencha os elementos em uma matriz com um valor estático
- filter () -> Cria uma nova matriz com cada elemento em uma matriz que passa um teste
- find () -> Retorna o valor do primeiro elemento em uma matriz que passa um teste
- findIndex () -> Retorna o índice do primeiro elemento em uma matriz que passa um teste
- forEach () -> Chama uma função para cada elemento da matriz
- indexOf () -> Pesquisar a matriz para um elemento e retorna sua posição
- isArray () -> Verifica se um objeto é uma matriz
- join () -> junta todos os elementos de uma matriz em uma string
- lastIndexOf () -> Procure a matriz para um elemento, começando no final, e retorna sua posição
- map () -> Cria uma nova matriz com o resultado de chamar uma função para cada elemento da matriz
- pop () -> Remove o último elemento de uma matriz e retorna esse elemento
- push () -> Adiciona novos elementos ao final de uma matriz e retorna o novo comprimento
- reduzir () -> Reduzir os valores de uma matriz para um único valor (indo da esquerda para a direita)
- reductionRight () -> Reduza os valores de uma matriz para um único valor (indo da direita para a esquerda)
- reverse () -> Inverte a ordem dos elementos em uma matriz
- shift () -> Remove o primeiro elemento de uma matriz e retorna esse elemento
- slice () -> Seleciona uma parte de uma matriz e retorna a nova matriz
- some () -> verifica se algum dos elementos de uma matriz passa uma prova
- sort () -> Classifica os elementos de uma matriz
- splice () -> Adiciona / Remove elementos de uma matriz
- toString () -> Converte uma matriz em uma string e retorna o resultado
- unshift () -> Adiciona novos elementos ao início de uma matriz e retorna o novo comprimento
- valueOf () -> Retorna o valor primitivo de uma matriz
Diferença entre matrizes e objetos:
- Arrays usam índices numerados
- Objetos usam índices nomeados
- Booleans
Valor true ou false
Boolean propriedades:
- constructor-> Retorna a função que criou o protótipo do objeto Array
- prototype-> Permite adicionar propriedades e métodos a um objeto Array
Boolean métodos:
- toString () -> Converte um valor booleano para uma string e retorna o resultado
- valueOf () -> Retorna o valor primitivo de um booleano
Operador ternário -> variableName = (condition) ? value1:value2
- Tipo Conversão
Tabela de Conversão de Tipo -> w3schools.com/js/js_type_conversion.asp
- RegExp
Expressões regulares -> developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Regular_Expressions
search() -> Usa uma expressão para procurar uma correspondência e retorna a posição da partida.
replace() -> Retorna uma seqüência de caracteres modificada onde o padrão é substituído
RegExp propriedades:
- consctrutor -> Retorna a função que criou o protótipo do objeto RegExp
- global -> Verifica se o modificador "g" está configurado
- ignoreCase -> Verifica se o modificador "i" está configurado
- lastIndex -> Especifica o índice no qual iniciar a próxima partida
- multiline -> Verifica se o modificador "m" está configurado
- source -> Retorna o texto do padrão RegExp
RegExp métodos:
- compile () -> Deprecated na versão 1.5. Compila uma expressão regular
- exec () -> Testes para uma correspondência em uma string. Retorna a primeira partida
- test () -> Testes para uma correspondência em uma string. Retorna verdadeiro ou falso
- toString () -> Retorna o valor da string da expressão regular
- Errors
Errors:
- try -> Teste um bloco de código para erros
- catch -> lidar com o erro
- throw -> Criar erros personalizados
- finalmente -> Execute o código, depois de tentar e pegar, independentemente do resultado
Error objeto propriedades:
- name -> Define ou retorna um nome de erro
- mensagem -> Define ou retorna uma mensagem de erro
6 tipos:
- EvalError -> Ocorreu um erro na função eval ()
- RangeError -> Um número "fora do alcance" ocorreu
- ReferenceError -> Uma referência ilegal ocorreu
- SyntaxError -> Ocorreu um erro de sintaxe
- TypeError -> Ocorreu um erro de tipo
- URIError -> Ocorreu um erro no encodeURI ()
- Global
Propriedades e funções globais podem ser usadas com todos os objetos JavaScript incorporados.
Global propriedades:
- Infinito -> Um valor numérico que representa infinito positivo / negativo
- NaN -> valor "Não-numero"
- indefinido -> Indica que uma variável não recebeu um valor
Global functions:
- decodeURI () -> Decode um URI
- decodeURIComponent () -> Decode um componente URI
- encodeURI () -> Encode um URI
- encodeURIComponent () -> Codifica um componente URI
- escape () -> Deprecated na versão 1.5. Use encodeURI () ou encodeURIComponent () em vez disso
- eval () -> Avalia uma string e executa-a como se fosse um código de script
- isFinite () -> Determina se um valor é um número finito e legal
- isNaN () -> Determina se um valor é um número ilegal
- Number () -> Converte o valor de um objeto em um número
- parseFloat () -> Analisa uma string e retorna um número de ponto flutuante
- parseInt () -> Analisa uma string e retorna um número inteiro
- String () -> Converte o valor de um objeto em uma string
- unescape () -> Desativado na versão 1.5. Use decodeURI () ou decodeURIComponent () em vez disso
- Debugging
Debuggers podem ser ativados e desativados, obrigando os erros a serem relatados ao usuário.
Breakpoints -> lugares onde a execução do código pode ser interrompida e examinar variáveis enquanto o código está sendo executado.
F12, e selecione "Console" no menu do depurador.
console.log() -> Exibir valores de JavaScript na janela do depurador
debugger keyword -> Interrompe a execução do JavaScript e chama (se disponível) a função de depuração
- Console
window.console ->
Console métodos:
- assert () -> Grava uma mensagem de erro no console se a asserção for falsa
- clear () -> Limpa o console
- count () -> Registra o número de vezes que essa chamada particular para contar () foi chamada
- error () -> Sai uma mensagem de erro para o console
- group () -> Cria um novo grupo inline no console. Este recuo segue as mensagens do console por um nível adicional, até que console.groupEnd () seja chamado
- groupCollapsed () -> Cria um novo grupo inline no console. No entanto, o novo grupo é criado colapsado. O usuário precisará usar o botão de divulgação para expandi-lo
- groupEnd () -> Sai do grupo inline atual no console
- info () -> Saída de uma mensagem informativa para o console
- log () -> Sai uma mensagem para o console
- table () -> Exibe dados tabulares como uma tabela
- time () -> Inicia um temporizador (pode seguir o tempo que leva uma operação)
- timeEnd () -> Pára um temporizador que foi iniciado anteriormente por console.time ()
- trace () -> Emite um rastreamento de pilha para o console
- warn () -> Saída de uma mensagem de aviso para o console
- Storage
Storage objeto método:
- chave (n) -> Retorna o nome da nth chave no armazenamento
- getItem (keyname) -> Retorna o valor do nome da chave especificada
- setItem (keyname, value) -> Adiciona essa chave ao armazenamento, ou atualiza o valor dessa chave se já existe
- removeItem (keyname) -> Remove essa chave do armazenamento
- clear () -> Vazio toda a chave do armazenamento
API de armazenamento na Web:
- window.localStorage -> Permite salvar pares de chaves / valores em um navegador da Web. Armazena os dados sem data de validade
- window.sessionStorage -> Permite salvar pares de chaves / valores em um navegador da Web. Armazena os dados para uma sessão
- Hoisting
Comportamento padrão de mover todas as declarações para o topo do escopo atual
Para evitar erros, sempre declare todas as variáveis no início de cada escopo
- Strict Mode
Sintaxe ruim em erros reais
Mais fácil de escrever JavaScript seguro
Precisa ser declarado no inicio do codigo
- JavaScript Style Guide e Coding Conventions
Orientações de estilo para programação
Segurança de código
- Best Practices
Evite as variáveis globais
Variáveis de declarações no topo
Nunca Declare Number, String ou Objetos Booleanos
Não use novo Object()
Use === Comparação
Usar Padrões de Parâmetros
Encerre seus switchs com defaults
Evite usar eval()
- Performasse
Reduza a atividade em Loops
Reduzir o acesso DOM
Reduzir o tamanho do DOM
Evite variáveis desnecessárias
Atrasar JavaScript carregando
Evite usar with
- Reserved Words
64 Palavras reservadas:
- abstract, arguments, await, boolean, break, byte, case, catch, char, class, const, continue, debugger, default, delete, do, double, else, enum, eval, finally, float, for, function, goto, if, implements, import, in, instanceof, int, interface, let, long, native, new, null, package, private, protected, public, return, short, static, super, switch, synchronized, this, throw, throws, transient, true, try, typeof, var, void, volatile, while, with e yield
16 Palavras reservadas removidas:
- abstract, boolean, byte, char, double, final, float, goto, int, long, native, short, synchronized, throws, transient e volatile
20 Objetos, propriedades e métodos:
- Array, Date, eval, function, hasOwnProperty, Infinity, isFinite, isNaN, isPrototypeOf, length, Math, NaN, name, Number, Object, prototype, String, toString, undefined e valueOf
6 Palavras reservadas de Java:
- getClass, java, JavaArray, javaClass, JavaObject e JavaPackage
85 Outras palavras reservadas:
- alert, all, anchor, anchors, area, assign, blur, button, checkbox, clearInterval, clearTimeout, clientInformation, close, closed, confirm, constructor, crypto, decodeURI, decodeURIComponent, defaultStatus, document, element, elements, embed, embeds, encodeURI, encodeURIComponent, escape, event, fileUpload, focus, form, forms, frame, innerHeight, innerWidth, layer, layers, link, location, mimeTypes, navigate, navigator, frames, frameRate, hidden, history, image, images, offscreenBuffering, open, opener, option, outerHeight, outerWidth, packages, pageXOffset, pageYOffset, parent, parseFloat, parseInt, password, pkcs11, plugin, prompt, propertyIsEnum, radio, reset, screenX, screenY, scroll, secure, select, self, setInterval, setTimeout, status, submit, taint, text, textarea, top, unescape, untaint e window
12 Manipuladores de eventos HTML:
- onblur, onclick, onerror, onfocus, onkeydown, onkeypress, onkeyup, onmouseover, onload, onmouseup, onmousedown e onsubmit
- Versões
JavaScript é a linguagem e EcmaScript é a padronização.
Edições do ECMAScript:
- 1997 - ECMAScript 1 - Primeira edição
- 1998 - ECMAScript 2 - Somente mudanças editoriais
- 1999 - ECMAScript 3 - Adicionado expressões regulares e try/catch
- 1999 - ECMAScript 4 - Nunca foi lançado
- 2009 - ECMAScript 5 - Adicionado "strict mode" e suporte JSON
- 2011- ECMAScript 5.1 - Alterações editoriais
- 2015 - ECMAScript 6 - Adicionado classes e modules
- 2016 - ECMAScript 7 - Adicionado operador exponencial (**) e Array.prototype.includes
Suporte de navegadores:
- O ECMAScript 3 é totalmente suportado em todos os navegadores
- O ECMAScript 5 é totalmente suportado em todos os navegadores modernos
- ECMAScript 6 é parcialmente suportado em todos os navegadores modernos
- ECMAScript 7 é mal suportado em todos os navegadores
- JSON
JSON is a format for storing and transporting data
JavaScript Object Notation
- Formulários
Atributos de entrada em HTML:
- disabled - Especifica que o elemento de entrada deve ser desativado
- max - Especifica o valor máximo de um elemento de entrada
- min - Especifica o valor mínimo de um elemento de entrada
- pattern - Especifica o padrão de valor de um elemento de entrada
- required - Especifica que o campo de entrada requer um elemento
- type - Especifica o tipo de um elemento de entrada
CSS pseudo selectors:
- :disabled - Seleciona elementos de entrada com o atributo "desativado" especificado
- :invalid - Seleciona elementos de entrada com valores inválidos
- :optional - Seleciona elementos de entrada sem atributo "obrigatório" especificado
- :required - Seleciona elementos de entrada com o atributo "necessário" especificado
- :valid - Seleciona elementos de entrada com valores válidos
Validação de restrição DOM Methods:
- checkValidity () - Retorna verdadeiro se um elemento de entrada contiver dados válidos.
- setCustomValidity () - Define a propriedade validationMessage de um elemento de entrada.
Validação de restrição Propriedades do DOM:
- validade - Contém propriedades booleanas relacionadas à validade de um elemento de entrada
- validationMessage - Contém a mensagem que um navegador exibirá quando a validade for falsa
- willValidate - Indica se um elemento de entrada será validado
- Objetos
Quase "tudo" é um objeto, objetos são variáveis contendo variáveis:
- Booleanos podem ser objetos (se definidos com a nova palavra-chave)
- Os números podem ser objetos (se definidos com a nova palavra-chave)
- As strings podem ser objetos (se definido com a nova palavra-chave)
- As datas são sempre objetos
- As matemáticas são sempre objetos
- Expressões regulares são sempre objetos
- Arrays são sempre objetos
- As funções são sempre objetos
- Objetos são sempre objetos
Objeto literal - você define e cria um objeto em uma declaração
3 maneiras de acessar propriedades:
- objectName.property
- objectName["property"]
- objectName[expression]
delete - deleta a propriedade
this - acessar atributo e métodos dentro de objetos
Atributos são variáveis e métodos são funções
maneira de acessar método:
- objectName.methodName()
new - construir um novo objeto
Litérais vs objectos:
- array[] x new Arra()
- pattern () x new RegExp()
- function(){} x new Function()
- object{} x new Object()
prototype - São usadas para adicionar atributos e métodos de fora do objeto
- Funções
Função declarada:
- function functionName(parameters){
code to be executed
}
Função expressiva:
- var x = function (a, b) {return a * b};
Função anonima - Sem um nome
Função hoisting - Comportamento padrão das declarações móveis no topo do escopo atual
Auto-invocação ou IIFE - É invocado automaticamente, sem ser chamado
- (function () {
var x = "Hello!!";
})();
Funções podem ser usadas como valor
toString() - Método retorna a função como uma string
parâmetros - São os nomes listados na definição da função
argumentos - Os valores reais são passados para (e recebidos por) a função
call, apply ou bind - Métodos que toda função em JavaScript possui nativamente implementada
call - Método de funções capaz de alterar o valor this, o primeiro parâmetro que recebe é o valor de this que que será atribuído à função e os demais parâmetros são os parâmetros da função que invoca o método Call
apply - Exatamente como o método Call, porém seu segundo parâmetro recebe um Array ou Array-like dos parâmetros da função
bind - Não executa a função, mas retorna uma outra, altera o this ou alterar o número de parâmetros de uma função
Closures - Funções definidas dentro de um "contexto léxico". Por exemplo aumentar a fonte do site
- DOM
Modelo de objeto padrão e interface de programação para HTML
3 Maneiras de encontrar elementos HTML
- document.getElementById(id) - Pega o id de um elemento
- document.getElementsByTagName(name) - Pega o tag name
- document.getElementsByClassName(name) - Pega a classe name
4 Maneiras de alterar elementos HTML:
- element.innerHTML = novo conteúdo html - Muda o HTML interno de um elemento
- element.attribute = new value - Muda o valor do atributo de um elemento HTML
- element.setAttribute (atributo, valor) - Alterar o valor do atributo de um elemento HTML
- element.style.property = new style - Muda o estilo de um elemento HTML
5 Maneiras de adicionar e excluir elementos:
- document.createElement (elemento) - Crie um elemento HTML
- document.removeChild (elemento) - Remove um elemento HTML
- document.appendChild (elemento) - Adicionar um elemento HTML
- document.replaceChild (elemento) - Substitua um elemento HTML
- document.write (texto) - Escreva no fluxo de saída HTML
Adicionando manipuladores de eventos:
- document.getElementById(id).onclick = function(){code} Adding event handler code to an onclick event
24 Maneiras de como encontrar objetos HTML:
- document.anchors - Retorna todos os <a> elementos que possuem um atributo de nome
- document.baseURI - Retorna o URI de base absoluta do documento
- document.body - Retorna o elemento <body>
- document.cookie - Retorna o cookie do documento
- document.doctype - Retorna o documento do documento
- document.documentElement - Retorna o elemento <html>
- document.documentMode - Retorna o modo usado pelo navegador
- document.documentURI - Retorna o URI do documento
- document.domain - Retorna o nome de domínio do servidor de documentos
- document.domConfig - Obsoleto. Retorna a configuração do DOM
- document.embeds - Retorna todos os elementos <embed>
- document.forms - Retorna todos os elementos <form>
- document.head - Retorna o elemento <head>
- document.images - Retorna todos os elementos <img>
- document.implementation - Retorna a implementação do DOM
- document.inputEncoding - Retorna a codificação do documento (conjunto de caracteres)
- document.lastModified - Retorna a data e hora em que o documento foi atualizado
- document.links - Retorna todos os elementos <area> e <a> que possuem um atributo href
- document.readyState - Retorna o status (carregando) do documento
- document.referrer - Retorna o URI do referente (o documento de ligação)
- document.scripts - Retorna todos os elementos <script>
- document.strictErrorChecking - Retorna se a verificação de erros for aplicada
- document.title - Retorna o elemento <title>
- document.URL - Retorna o URL completo do documento
- BOM
Browser Object Model
Propriedades, métodos, navegação, tela, histórico e localização
- AJAX
Asynchronous JavaScript And XML
Combinação de XMLHttpRequest object, JavaScript e HTML DOM