Introdução à programação
Javascript
Javascript
Linguagem de programação para a Internet
Linguagem mais popular no mundo
Criada em 1995
Inserida na trilogia
HTML - define o conteúdo das páginas da internet;
CSS - especifica o aspeto das páginas da internet;
Javascript - programa o comportamento das páginas da internet;
Onde se usa
Pode ser colocada na
secção HTML <body> ou
<head>, tendo de estar
entre as tags
<script> </script>
Onde se usa
Pode-se fazer a ligação a
um ficheiro externo,
assim podem-se usar as
funções em várias
páginas
O local da página onde
se coloca define o
momento em que o
ficheiro é carregado
HTML DOM - (Document Object Model)
Standard para aceder a documentos web, que ficam organizados numa estrutura
de árvore
DOM
Através deste modelo o Javascript pode criar HTML de forma dinâmica:
Adicionar, remover ou alterar elementos e atributos HTML
Alterar atributos e estilos CSS
Reagir e criar eventos HTML
[Link]("demo").innerHTML = "Hello World!";
Método Propriedade
DOM - aceder a elementos
id - [Link]("intro");
tag - [Link]("p")
class - [Link]("intro")
seletor CSS - [Link]("[Link]")
DOM - eventos
São “coisas” que acontecem a elementos de HTML e aos quais o javascript pode
reagir
onchange - um elemento HTML foi alterado
onclick - o Utilizador clicou num elemento HTML
onmouseover - o Utilizador moveu o rato sobre um elemento HTML
onmouseout - o Utilizador moveu o rato para fora de um elemento HTML
onkeydown - o Utilizador carregou numa tecla
onload - o browser terminou de carregar a página
Interação com html
Alterar html de um elemento
[Link](‘idDoElemento’).innerHTML = “novoHTML”;
ex: [Link](‘titulo’).innerHTML = “Bem-vindo!”;
Aceder ao valor de um input
[Link](‘idDoElemento’).value
ex:<input type=”text” id=”nome”>
let nome = [Link](“nome”).value;
Interação com css
Alterar css de um elemento
[Link](‘idDoElemento’).[Link] = “novoValorCss”;
ex: [Link](‘titulo’).[Link] = “bold”;
No caso do atributo ter um nome composto deve ser transformado em camelCase:
ex: [Link](‘titulo’).[Link] = “green”;
Saída de informação - [Link]
Saída de informação - [Link]
Se executado após a página carregada apaga tudo !!
Saída de informação - innerHTML
Saída de informação - [Link]
Sintaxe - operadores
Atribuição
let x = 6;
y = x + 3;
As operações aritméticas usam as regras da matemática
( ( 5 + 6 ) * 10 ) / 2
Expressões
x*2
‘Antonio’ + ‘ ‘ + ‘Maria’
Sintaxe - palavras reservadas e identificadores
Palavras reservadas - usadas para identificar ações, ex:
var
Identificadores - usados para dar nome a variáveis,
funções etiquetas
Primeiro caracter tem de ser uma letra, underscore (_) ou cifrão ($)
Restantes caracteres podem ter números
Sensíveis a maiúsculas/minusculas: Nome e nome são diferentes
Quando se pretende usar várias palavras:
Underscore: primeiro_numero
CamelCase: primeiroNumero
Sintaxe
Comentários
let x = 5; // isto não será executado
/* let x = 6;
Isto também não */
Ponto e vírgula - usado para terminar uma instrução
Espaços - são ignorados pelo programa mas usados para maior
clareza
Tamanho - deve-se evitar mais de 80 caracteres seguidos, mudando
de linha
Chavetas - usadas para encapsular um conjunto de instruções
Tabulação - usada para dar clareza ao código
Variáveis
“Caixas” usadas para guardar informação
const IVA = 0,23; <- Valor constante não pode ser mudado
let preco = 5; <- Valor variável, pode ser mudado
let total = preco * IVA;
Podem receber números, texto ou true/false (booleanos)
São dinâmicas, podem ser usadas com tipos diferentes
Operadores
Operadores Descrição
+ Adição
- Subtração
* Multiplicação
/ Divisão
% Módulo (resto da divisão)
++ Incremento
-- Decremento
Atribuição
Operador Exemplo Mesmo que
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
Comparação
Operador Descrição
== igual a
=== valor e tipo igual
!= valor diferente
!== valor e tipo diferente
> maior que
< menor que
>= maior ou igual a
<= menor ou igual a
== e ===
== operador que converte os valores para o mesmo tipo e depois compara
true == 1; //true, porque 'true' é convertido para 1 e depois comparado
"2" == 2; //true, porque "2" é convertido em 2 e depois comparado
=== operator que compara literalmente
true === 1; //false
"2" === 2; //false
Por ser mais intuitivo e fiável deve-se usar sempre === e !==
Operadores lógicos
Operador Descrição Exemplo Resultado
&& E ( x < 10 && y > 1)
|| OU ( x == 5 || y == 5 ) true
! NÃO !( x == y )
false
true
x=6ey=3
Tipos de dados
Strings - sequência de texto, usa-se aspas ou plicas para representar
“Eu” ‘Tu’ “O’Neil”
Números
inteiros - 5
decimais - 4.5
notação cientifica - 123e5 (1230000) ou 123-e5 (0.0123)
Booleanos
true/false
Arrays (tabelas)
var carros = [“Fiat” , “BMW” , “Volvo”]
Objetos
var pessoa = { nome:”José” , apelido:”Silva”, idade:17, olhos:”Castanho”}
Estilo de formatação
/**
* Procura a 1ª letra do nome e caso encontre
Comentários * guarda as seguintes X letras em hits
Devem explicar sucintamente os **/
passos chave
for ( var i=0 ; i< [Link] ; i++ )
{
Espaços if ( text[ i ] === myName[ 0 ] )
Usados para dar clareza ao {
código separando elementos
for(var j=i ; j< ( [Link] + i ) ; j++)
{
Tabulações [Link]( text[ j ] );
Sempre que se usar chavetas }
deve-se alinhar o código no seu
interior
}
}
if (cond)
Condição if {
Verdade
if (cond) if (cond) }
{ { else if (cond)
Verdade Verdade {
}; } Verdade
else }
{ else
Falso {
}; Falso
};
Condição if - notação ternária
cond ?
(cond ?
cond ? Verdade :
Verdade : Falso ):
(cond ?
Falso Verdade :
Falso );
if (?)
Condição if {
Verdade
}
Vários if podem ser encadeados else
{
if (?)
{
Verdade
}
else
{
Falso
};
};
Switch
switch(expressão/variável) switch(genero)
{ {
case ‘opção1’: case ‘M’:
instruções; [Link](‘Its a Boy!!’);
break; break;
case ‘opção2’: case ‘F’:
instruções; [Link](‘Its a Girl!!’);
break; break;
default: default:
instruções; [Link](‘Género indeterminado’);
} }
Funções Argumentos
function nomeFuncao(argumento1,...)
{
instruções;
return resultado; FUNÇÃO
FUNÇÃO
};
nomeFuncao(valor1,...);
Resultado
Funções - como expressão
function nomeFuncao(argumento1,...) const nomeFuncao = (argumento1,...) =>
{ {
instruções; instruções;
return resultado; return resultado;
}; };
nomeFuncao(valor1,...); nomeFuncao(valor1,...);
Funções - expressão reduzida
apenas 1 argumento anula os parênteses
const nomeFuncao = (argumento1) => const nomeFuncao = argumento1 =>
{ instruções;
return instrução;
};
função com apenas 1 linha de instruções é
automaticamente devolvida e não é preciso chavetas
Âmbito
Global Local
Declarada no início do programa Declarada dentro das funções
Pode ser usada em todo o lado Só pode ser usada dentro da função
mesmo dentro de funções onde foi criada
Ocupa memória mesmo que nunca Apenas ocupa memória quando a
seja usada função é chamada
let caixa = 1; let caixa = 1;
function cena(){ function cena(){
[Link](caixa); let caixa = 2;
} [Link](caixa);
cena(); }
[Link](caixa); cena();
1
[Link](caixa);
1 2
1
Arrays ou vetores
let lista = [“primeiro elemento”, 2, true, “Joaquim”, 3.14 ]
lista [2] // true
[Link] // 5
shift
pop
0 1 2 3 4
“primeiro
2 true “Joaquim” 3.14
elemento”
unshift
push
Ciclo For
for(início ; fim ; (in/de)crementa)
{ 1. Valor inicial
instruções; 2. A condição é verdadeira?
} for(let i=0 ; i<5 ; i++)4. (in/de)crementa
{
instruções;
}
3. Executa
Ciclo While
while(?)
{
1. A condição é verdadeira?
instruções;
} while(condicao === true)
{
instruções;
}
2. Executa
Ciclo Do While
do do
{ {
instruções; instruções;
} }
1. Executa
while(?); while(condicao === true);
2. A condição é verdadeira?
Acesso a múltiplos elementos
É devolvido um array, temos de aceder aos vários elementos para os manipular:
var elementos = [Link]("P");
for (let i = 0; i < [Link]; i++) {
elementos[i].[Link] = "red";
}
Manipular classes: [Link]
Variáveis de sessão (ficam ativas até o browser ser fechado)
Guardar valores
[Link]('nomeVariavel', valorGuardar);
ex: [Link](‘apelido’, ‘Silva’);
Ler valores
[Link](‘nomeVariavel’);
ex: [Link](‘apelido’);
Mudar de página com js
[Link] = "[Link]";
Variáveis de disco (ficam guardadas mesmo depois do browser ser fechado)
Guardar valores
[Link]('nomeVariavel', valorGuardar);
ex: [Link](“contador”, 1);
Ler valores
[Link](‘nomeVariavel’);
ex: [Link](“contador”);
Apagar variável
[Link](‘nomeVariavel’);
ex: [Link](“contador”);
Cookies (ficam gravadas no computador mas só se o utilizador autorizar cookies)
Guardar um cookie
[Link] = "utilizador=admin; expires=Thu, 18 Dec 2013 12:00:00 UTC";
Ler cookies
var x = [Link];
Mais info
[Link]
Tempo
Data corrente : var d = new Date();
Executar uma função daqui a x milisegundos
[Link](função, milisegundos);
Executar uma função a cada x milisegundos
var cicloTempo = [Link](função, milisegundos);
Parar o ciclo: [Link](cicloTempo )
Mais info: [Link]