Breve introdução
Javascript - Linguagem de programação para interagir com uma página web
NOTA: Corre no browser
O que é?
// vai escrever 'Miguel Bosta' na consola do browser
console.log("Miguel Bosta");
// criar 'variável' para guardar informação
var nome = "Miguel Bosta";
// também vai escrever 'Miguel Bosta' na consola do browser
console.log(nome);
// criar uma notificação de browser
alert(nome);
// isto vai simplesmente responder com a string 'nome'
console.log("nome");Instruções são interpretadas e executadas por ordem, de cima para baixo.
ponto e vírgula (';') no final de cada instrução é opcional em JavaScript
<html>
<head>...</head>
<body>
...
<script src="caminho/para/script.js"></script>
</body>
</html>Variables in JavaScript are containers which hold reusable data.
They are like cups filled with stuff, and this stuff can be used over and over again depending on whichever way we choose.
- autor: Chris Nwamba, via scotch.io
var nome = 'Batman'Declaração
// variáveis podem ter letras,
// números (desde que n comece com um)
// e underscores
var aString = "texto normal";
var aNumber = 2;
var anotherNumber = aNumber + 1;
// output vai ser 3
console.log(anotherNumber)
// decimal
var aindaOutroNumero = 3.2;
// booleano: verdadeiro ou falso.
// Útil para condições
var estaCorreto = false;
// lista de itens
var aList = [1, 2, aString, aNumber];
// primeiro item da lista
console.log(aList[0]);
// último item da lista
console.log(aList[3]);
// objeto.
// Útil para organizar dados
// relacionados
var opcoes = {
estaDisponivel: false,
quantidade: 2,
nome: "Jorge"
}
// referenciar propriedades
// de objetos com "ponto"
console.log(opcoes.nome);Complexos
Simples
var a = '3'
console.log(a)quero que 'a' passe a ter o valor 3 (associação)
olha, preciso do valor de 'a' para fazer algo com ele
(neste caso, imprimir na consola)
em vez de var, também existe let e const, que não serão abordados agora...
// nomes adequados
var umNome
// case-sensitive
var umnome
var um_nome
var _umNOmE
// funciona, mas NÃO RECOMENDO!
var ágata
// nomes inadequados
// var 1nome
// var um-nome
// var um.nome// valores 'string' têm de estar
// envolvidos em "" ou ''
var aString = "texto normal"
// pode-se combinar strings somando
var b = 'texto ' + 'combinado'
// e quando quero texto com pelicas ou aspas?
var text = "I am \"the Law\", yes!" // (I am "the Law", yes!)
// nr. de caracteres? Usem.length
texto.length // 12 - o espaço conta!
Conteúdo textual
".length" é uma propriedade. Falaremos delas depois...
var umNumero = 16
// também pode ser negativo
var numNegativo = -40
// pode-se fazer operações básicas com números
// qual será o valor de cada um destes casos?
var outroNumero = umNumero + 30
var aindaOutroN = umNumero - 10
var maisOutroNr = umNumero * 2
var aindaMaisNr = umNumero / 8
// pode-se fazer o mesmo com decimais
var nrDecimal = 20.4
// em alguns casos, somas com decimais podem dar "problemas"
console.log(285.72 + 142.86)
Contas e quantidades
var isStrong = true
var canFly = false
// são resultado de comparações
console.log(10 > 1) // true
console.log(20 >= 30) // false
console.log('b' > 'a') // true, 'b' vem depois
console.log('B' > 'a') // false? Tem a ver com tabela ASCII
console.log(10 === 11) // 10 e 11 não são iguais!
console.log(10 !== 11) // 10 e 11 não são iguais!
console.log(!true) // não-verdade = falso
console.log(!(10 > 11)) // verdade, 10 > 11 é mentira!
// vamos revisitá-los quando se falar de condiçõesverdadeiro ou falso?
símbolos condicionais
2 === 2 // equivale a...
'a' !== 'b' // difere de...
3 > 2 // maior que
1 < 2 // menor que
3 >= 3 // maior que ou igual a
3 <= 3 // menor que ou igual a
// Negação (inverte o valor)
!(3 === 2) // NÃO igual a...
// Avançado
// == vs ===
// != vs !==
// === e !== verifica tipo de variável também
3 !== '3' // uma é string, outra é número
// == e !=, em caso de tipos diferentes converte uma delas
3 == '3'
// combinar condições com && e ||
console.log( (2 > 1) && (3 > 1) ) // 2 > 1 E 3 > 1?
console.log( (1 < 0) || (2 > 1) ) // 1 < 0 OU 2 > 1?AVANÇADO - combinações de condições
condicao && condicao-2 -> se uma for falsa, é mentira!
condicao || condicao-2 -> se uma for verdadeira, é verdade
Faz chuva OU faz sol?
Faz chuva E faz sol?
fazChuva() && fazSol()fazChuva() || fazSol()Isto são funções. Falaremos delas depois...
pode-se agrupar condições entre parêntesis
variáveis simples
variáveis simples
var nomes = ['Batman', 'Rambo', 'Noddy', 1]
// imprimir o segundo nome. O primeiro índice é '0'
console.log(nomes[1])
// mudar o segundo valor para 'Stallone'
nomes[2] = 'Stallone' // nomes tem ['Batman', 'Rambo', 'Stallone', 1]
// imprimir comprimento da lista
console.log(nomes.length)
// adicionar entradas
nomes.push('Hulk') // ['Batman', 'Rambo', 'Stallone', 1, 'Hulk']
// remover última entrada
nomes.pop() // nomes tem ['Batman', 'Rambo', 'Stallone', 1]
// remover a segunda entrada
// desde o indice 1, remover 2 entradas
nomes.splice(1,2) // agora nomes tem ['Batman', 1]
console.log(nomes)
// combinar listas
var lista1 = [1,2,3]
var lista2 = [4,5]
var listaCombo = lista1.concat(lista2)lista pode ter itens de vários tipos
var jogador = {
primeiroNome: 'Carlos',
ultimoNome: 'Batman',
anoNascimento: 1939,
camisola: 6,
vitorias: 19,
derrotas: 87,
empates: 21,
jogoFavorito: 'Super Mario World'
}
console.log(jogador.camisola) // ou jogador['camisola']
// mudar valores de propriedades
jogador.vitorias = 90 // deixou de ser 19
// propriedades podem ter qualquer valor, até listas ou objetos
var jogadorBingo = {
nome: {
primeiro: 'Josefina',
ultimo: 'Benfica'
},
numeros: [1, 3, 4, 24, 87],
}
console.log(jogadorBingo.nome.primeiro) // 'Josefina'
console.log(jogadorBingo.numeros[2]) // 4propriedade: valor
propriedades separadas por ','
nomes de propriedades não precisam de aspas ou pelicas desde que não tenham caracteres especiais como - ou _
objeto.propriedade
(usa ponto, como '.length' em strings e arrays)
if (numPessoas < 3) {
console.log('somos muito poucos')
} function responderA(pessoa) {
console.log('Não gosto de ' + pessoa)
}for (var i=0; i<nPessoas; i=i+1) {
console.log('pessoa ' + i + ' chama-se ' + pessoas[i])
} bloco
// correr um "bloco" de código se uma condição se verificar
// lembram-se dos "booleanos"?
if (4 < 3) {
console.log('isto nunca vai correr')
} else {
console.log('isto vai sempre correr')
}
// qual teria de ser o valor desta variável
// para imprimir "Gostei muito do primeiro!"?
var nome = "Joaquim"
if (nome === "Rambo") {
console.log("Gostei muito do primeiro!")
}// condicao deve ser uma expressao
// que resulte em true ou false
if (condicao) {...}
else if (condicao) {...}
else {...}var x = 4
var y = 10
if (x __ y) {
console.log('certo')
}Que símbolos condicionais (exceto o 'diferente de' tenho de colocar (em __) para o script imprimir "certo"?
Façam todas as possibilidades!
var x = 64
var y = 1
if (y __ x) {
console.log('certo')
}var x = 'a'
var y = 'a'
if (y __ x) {
console.log('certo')
}var x = 'a'
var z = 'u'
if (z __ x) {
console.log('certo')
}var x = 64
var y = 1
if (y __ x) {
console.log('errado')
} else {
console.log('certo')
}var bat = 'a'
var man = 'c'
if (bat __ man) {
console.log('errado')
} else {
console.log('certo')
}// efetuar um número sequencial de ciclos
// é preciso definir
// - início
// - condição de fim
// - que fazer após cada passo
// ex.: imprimir 'olá' 5 vezes
for (var i=0; i < 5; i=i+1) {
console.log('olá')
}
// útil em conjunto com listas
// o que vai aparecer?
var pessoas = ['Josefina', 'Batman', 'Rambo']
var nPessoas = pessoas.length
for (var i=0; i < nPessoas; i=i+1) {
console.log('olá ' + pessoas[i] + '\n')
}for (instrucao-inicial; condicao-para-continuar; no-final-de-cada-passo) {
// passos
}ciclo pára quando isto der
false
(ver booleanos e condições)
// equivalente a
console.log('olá')
console.log('olá')
console.log('olá')
console.log('olá')
console.log('olá')// mais simples que ciclo "for"
// efetua bloco enquanto condição for true
// ex.: dizer olá 5 vezes
var i = 0
while (i < 5) {
console.log("olá")
i = i + 1
}while (condicao-para-ser-executado) {
// passos
}ciclo pára quando isto der
false
(ver booleanos e condições)
// equivalente a
console.log('olá')
console.log('olá')
console.log('olá')
console.log('olá')
console.log('olá')// uma função é uma maneira de agrupar instruções
// e manipular o seu comportamento em função de variáveis (parâmetros)
// uma função pode ter mais que um parâmetro, ou nenhum...
function nomeDaFuncao(parametro1, parametro2) {
// ...
}
// funções podem depois ser chamadas com ou sem parâmetros
nomeDaFuncao("valor de parâmetro 1", "valor de parâmetro 2");
// exemplo: uma função que imprime na consola
// o resultado da soma de dois números
function umaSoma(valor1, valor2) {
// criamos uma variável para guardar o valor temporariamente
var resultado = valor1 + valor2;
console.log(resultado);
}
// vamos chamar a função com os números 1 e 2
umaSoma(1, 2); // vai imprimir 3 na consola// uma função pode fornecer um resultado
// que pode ser associado a uma variavel
// ou usado como qualquer outro valor
function umaSoma(numero1, numero2) {
// ...
var resultado = numero1 + numero2
return resultado
}
var resultadoDeSoma = umaSoma(3, 4)
console.log(resultadoDeSoma)
// no que irá resultar isto?
console.log(umaSoma(1,2) * umaSoma(3,4))Uma função sem return retorna sempre 'undefined'
// declaração de uma função
function umaSoma(numero1, numero2) {
// ...
}
// uma função numa expressão
// pode ser associada a uma variável e invocada
var chamaPapi = function () {
console.log('papi')
}
chamaPapi()
// até podem ter uma função como propriedade...
var cao = {
nome: 'Krypto',
ladra: function() {
console.log('bark!')
}
}
cao.ladra() // bark!
// ... ou item de uma lista (apesar de ser "estranho" assim...)
var umaLista = ['a', 1, function() { console.log('bark') }, 'b']
umaLista[2]() // bark
// Avançado: até podem meter estas funções como parâmetros
function chamaFuncao(funcao) {
funcao()
}
chamaFuncao(chamaPapi) // 'papi'
// aliás, "function" também é um tipo de variável, como 'Object' ou 'String'
console.log(typeof chamaPapi)para verificar o tipo de dados
função 'anónima' não tem nome... tal como o "nome" sugere!
// assumindo que exista um elemento com id="main-text-element"...
var anElement = document.getElementById("main-text-element");
// mudar o texto e elementos descendentes
anElement.innerHTML = "texto modificado";
// mudar estilo
// seguido de 'style', colocar a propriedade
// em camelCase
anElement.style.backgroundColor = "hotpink";