JavaScript e Programação

Breve introdução

Comportamentos

  • Reações a cliques?
    • a scroll?
  • Mudanças em elementos?
  • Animações complexas?

JavaScript e DOM

Javascript - Linguagem de programação para interagir com uma página web

NOTA: Corre no browser

Linguagem de Programação

O que é?

  • Conjunto de instruções que criar programas
  • programas -> sequência de instruções lidas pela "máquina"
  • Gestão de dados diversos
    • texto
    • números (positivos, negativos, inteiros, decimais)
    • listas de dados
    • estruturas complexas
  • scripts .js - ficheiros com instruções lidas por um interpretador (como o do browser) sequencialmente

JavaScript

Sequências de instruções

// 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

JavaScript

Como adicionar script a página?

  1. Criar o ficheiro de 'script'
  2. Referenciar o script com a tag <script>
    1. é recomendado que a tag seja o último elemento do <body>, para poder aceder a todos os
  3. Experimentem na consola do 'browser', no inspetor
    1. Aliás, nem precisam de um 'script' para experimentar JS no browser
<html>
  <head>...</head>
  <body>
    ...
    <script src="caminho/para/script.js"></script>
  </body>
</html>

JavaScript

Variáveis e tipos de dados

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

Tipos de dados

// 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

Variáveis

Referência e associação

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)

Variáveis

em vez de var, também existe let  e const, que não serão abordados agora...

Notas sobre nomes 

// 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

Variáveis

  • só podem ter caracteres alfanuméricos (a-z, A-Z, 0-9) underscore (_) ou cifrão ($)
    • há casos estranhos
  • NÃO podem começar com um número
  • NÃO podem ser só à base de algarismos (confundir-se-iam com números)
  • NÃO podem ter hífenes (-)
    (confundir-se-iam com subtrações)
  • NÃO podem ter pontos
    (confundir-se-iam com propriedades)

"Strings"

// 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...

"Number"


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

Variáveis "Booleanos"


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ções

verdadeiro ou falso?

Variáveis "Booleanos"

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'

Variáveis "Booleanos"

// 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

  • && -> igual a 'E' em Português
  • || -> igual a 'OU' em Português

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

Exercícios

variáveis simples

  • Criar variável chamada comida e associar a texto com a comida preferida. Imprimir na consola
  • Criar duas variáveis: primeiroNome e ultimoNome, cada uma com o primeiro e último nome, respetivamente. Depois, criar uma terceira variável nome que seja a combinação dos dois, com um espaço no meio. Tem de se usar as duas variáveis anteriores, na declaração de nome
  • Criar variável (nome à escolha) com um número que corresponda à tua idade. Cria outra que corresponda à idade do colega do lado (ou professor). Faz uma terceira que seja a soma das duas. Imprime na consola: 'O total das idades é: ' mais a idade

Exercícios

variáveis simples

  • Criar variável que contenha o seguinte texto, incluindo pelicas e aspas:
    • I'm the "Batman"
  • Imprime o nr. de caraceres do texto "O rato roeu a rolha da garrafa" criando uma variável para este texto e usado um método próprio
  • cria duas variáveis: uma terá o valor 'casos' e outra terá o valor 'Casos'. Compara as duas, para verificar se são "iguais". Imprime o resultado

Variáveis complexas - Listas

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

Variáveis complexas - Objetos

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]) // 4

propriedade: 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)

Exercícios Listas e Objetos

  • Cria uma lista de bebidas, com pelo menos 3 entradas (menos 'whisky')
  • depois de criada a lista, muda a segunda entrada para 'whisky'
  • a seguir, adiciona um item ao final da lista: 'binho do Benfica'
  • avançado - criar uma lista com ['a', 1, 3, 'c', 24, 43.2] e, com uma instrução, retirar todos os índices exceto o primeiro e o último (deve ficar ['a', 43.2])

Exercícios Listas e Objetos

  • Cria um objeto para as opções de um jogo. Este objeto deve ter 3 propriedades: dificuldade (string), volume (número positivo ou zero),  legendas (booleano)
  • Faz uma lista de 11 objetos, cada um a representar um jogador de uma equipa de futebol. Cada jogador deve ter as seguintes propriedades:
    • numero (número, camisola)
    • posicao (string, pode ser 'guarda-redes', 'defesa', 'médio' ou 'avançado'
    • lesionado (booleano)
    • nome (objeto com duas propriedades: 'primeiro' (string) e 'último' (string)
    • foto (string para um URL)
    • altura (número decimal para metros)
    • idade (número)
    • avançado - equipas (lista de strings com nomes de equipas passadas)

"Blocos" de código

  • Sequências envolvidas por '{}'
  • usadas para organizar código ou corrê-lo com base em codições
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

Condições

// 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 {...}

Exercícios condições

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')
}

Ciclos 'for'

// 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á')

Ciclos 'while'

// 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á')

Exercícios ciclos (e condições)

  • Com um ciclo, imprime os números de 1 a 20, separados por '-'. Não tem problema se o número final também terminar com '-', mas se conseguirem retirá-lo...
  • Para cada jogador no exercício dos jogadores de futebol (ver "exercícios com listas e objetos"), têm de imprimir o nome, a posição e o número da camisola (seguido de um caracter de nova linha ('\n'). Têm de usar um ciclo e uma variável com o tamanho da lista, obtido a partir da mesma
  • faz os dois exercícios anteriores tanto com ciclos "for" como com ciclos "while"

Funções

meios de organizar código relacionado

// 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

Funções - return

fornecer um resultado

// 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'

Function expressions

// 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!

Exercícios Funções

  • cria uma função que imprima na consola o texto 'Olá pessoa' 
  • cria uma função que imprima na consola o texto 'Olá ' mais um nome, que é passado como parâmetro
  • cria uma função chamada 'idiotizar', que recebe como parâmetro um nome e retorna uma string composta por esse nome mais a string ' idiota!'
  • lembram-se da lista de jogadores de futebol? Criem uma função chamada 'chamaJogador' e que recebe como parâmetro um objeto que represente um jogador de futebol. A função deve imprimir 'chama-se o jogador ' mais o nome do jogador (propriedade 'nome') e o número (propriedade numero)
    • como poderias fazer para chamar TODOS os jogadores da lista?

DOM

interagir com os elementos da página

JavaScript

Referenciar elementos de uma página

// 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";

Exemplo

mudar o texto de elemento com id 'teste'

Introdução à programação com JavaScript

By Miguel Costa

Made with Slides.com

Introdução à programação com JavaScript

Uma apresentação ao JavaScript como linguagem de programação

  • 582

More from Miguel Costa