JavaScript
Palavras Reservadas
break delete function return typeof case do if switch var catch else in this void continue false instanceof throw while debugger finally new true with default for null try # Reserved for future use class const enum export extends import super
Variáveis Globais e Funções
arguments encodeURI Infinity Number RegExp Array encodeURIComponent isFinite Object String Boolean Error isNaN parseFloat SyntaxError Date eval JSON parseInt TypeError decodeURI EvalError Math RangeError undefined decodeURIComponent Function NaN ReferenceError URIError
3 maneiras de declarar uma função em Javascript
function statement
Sintaxe:
function name([param,[, param,[..., param]]]) {
[statements]
}
Exemplo:
function soma(x,y) {
return x + y;
};
function expression
A principal diferença entre function expression e function statement é o nome da função, que pode ser omitido em function expression para criar funções anônimas.
Sintaxe:
var myFunction = function [name]([param1[, param2[, ..., paramN]]]) {
statements
};
Exemplo:
var soma = function(x,y) {
return x + y;
};
Arrow function
Arrow function tem uma sintaxe mais curata do que uma function statement,
Sintaxe:
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression
// equivalent to: (param1, param2, …, paramN) => { return expression; }
// Rest parameters and default parameters are supported
(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { statements }
// Parentheses are optional when there's only one parameter:
(singleParam) => { statements }
singleParam => { statements }
// A function with no parameters requires parentheses:
() => { statements }
() => expression // equivalent to: () => { return expression; }
Exemplo:
var soma = (x,y) => { return x + y};
var soma = (x,y) => x + y;
Declaração de Variáveis
var message = "hello"; var i = 0, j = 0, k = 0;
Não existe declaração de tipo.
Strings
var s = "hello, world" // Texto inicial
s.charAt(0) // => "h" : primeira letra, inicia em 0
s.charAt(s.length-1) // => "d" : ultima letra
s.substring(1,4) // => "ell" : letras na posição 1 a 4
s.slice(1,4) // => "ell" : mesma coisa
s.slice(-3) // => "rld" : ultimas 3 letras
s.indexOf("l") // => 2 : posição da primeira letra l
s.lastIndexOf("l") // => 10 : posição da ultima letra l
s.indexOf("l",3) // => 3 : posição da primeira letra l apos o 3 carácter
s.split(", ") // => ["hello","world"] divide em 2 substrings
s.replace("h","H") // => "Hello, world" : troca todas a instancias de "h" por "H"
s.toUpperCase() // => "HELLO, WORLD" : converte pra maiúsculas.
Objetos
var empty = {}; // Objeto sem propriedades
var point = { x:0, y:0 }; // Objeto com 2 propriedades
var point2 = { x:point.x, y:point.y+1 }; // Objeto com 2 propriedades mais complexas
var book = {
"main title": "JavaScript" // Nomes de Propriedades contendo espaço,
'sub-title': "Iniciando em JavaScript" // e hifens usar aspas.
"for": "todas audiencias" // palavras reservadas use aspas
author: { // Objetos com outros objetos
firstname: "Enio",
lastname: "Basso"
}
};
var o = new Object(); // Objeto sem propriedades, mesmo que {}
var a = new Array(); // Array vazio, mesmo que []
var d = new Date(); // Objeto de Data, representado a hora atual
var r = new RegExp("js"); // Cria um objeto RegExp (Expressão Regular) para comparação.
Arrays
Definindo um array
var myArray = ["sat", "sun", "mon"]; var count = [1,,3]; // Array de 3 elementos, o do meio esta indefinido. var a[-1.23] = true; // // Criando um array com 2 elementos a = [true,false]; // Array com elementos na posição 0 e 1 a[2] // Valor não Definido a[-1] // Valor não Definido a = new Array(5); // Criando um array com 5 elementos a = []; // Criando um array com 0 elementos a[1000] = 0; // Define um elemento igual a 0 e define o tamanho do array para 1001 a = [1,2,3,4,5]; // Inicia um arra com 5 elementos a.length = 3; // a alterado para [1,2,3] a.length = 0; // deleta todos os elementos. a alterado para []. a.length = 5; // alterado para 5 elementos. Mesmo que a = new Array(5)
Manipulação de Array
var a = [1,2,3];
a.join(); // "1,2,3"
a.join(" "); // "1 2 3"
a.reverse().join(); // "3,2,1"
Document Object Model (DOM)
DOM define uma estrutura lógica para uma página HTML
| Nome | Descrição |
|---|---|
| firstChild, lastChild | start/end of this node's list of children |
| childNodes | array of all this node's children |
| nextSibling, previousSibling | neighboring nodes with the same parent |
| parentNode | the element that contains this node |