Introdução ao Javascript

Prévia do material em texto

Javascript
Prof. Adriano Rívolli
Programação Web
Web 
Cliente
Referências
• Guia do desenvolver Mozilla
– https://developer.mozilla.org/pt-BR/docs/JavaScript
• W3 Schools
– http://www.w3schools.com/js/– http://www.w3schools.com/js/
• Javascript 101
– http://learn.jquery.com/javascript-101/
O que é Javascript?
• Uma linguagem de script
• Uma linguagem interpretada
• Uma linguagem orientada a objetos e 
eventoseventos
• Funciona nos navegadores
• Geralmente inserida em páginas HTML
• Desenvolvida para tornar as páginas HTML 
interativas
• Javascript e Java são coisas 
completamente diferentes
O que faz Javascript?
• Deixa as páginas dinâmicas 
• Trabalha com eventos 
• Lê, manipula e cria elementos HTML
• Valida dados do formulário• Valida dados do formulário
• Interage com recursos do navegador
Formas de uso
• Nos atributos
O código Javascript é inserido como valor de um atributo, 
normalmente o código é pequeno (relacionado a eventos)
• Embutido na página• Embutido na página
O código Javascript é inserido junto com o conteúdo HTML 
(funções exclusivas/restritas a uma página)
• Arquivo externo
O código Javascript é inserido em um arquivo ".js" separado 
do conteúdo (funções genéricas utilizadas em todas as 
páginas)
Código nos atributos
• No atributo href do elemento a (links)
<a href="javascript:alert('Clicou no 
elemento! Impossível não clicar…');">Não
Clique!</a>
• Como valor de um atributo de evento
<button onClick="alert('Clicou!!!');">Clique 
para ver a mensagem!</button>
O alert é uma função do Javascript utilizada, para exibir uma 
mensagem para o usuário. Ele costuma ser muito inconveniente, mas 
será utilizado em alguns exemplos para simplificar o código.
No dia a dia utilize-o com moderação
Embutido
• Inserido na própria página por meio do elemento 
script:
<script>
alert("Olá Mundo Javascript.");
</script>
• É mais seguro executar as operações após ter certeza • É mais seguro executar as operações após ter certeza 
do carregamento da página:
<script>
window.onload = function() {
alert( "A página foi carregada" );
}
</script>
• Pode ser definido em qualquer local da página (head
e body )
Arquivo externo
page.js
function alo() {
alert('Olá Mundo!');
}
window.onload = function() {window.onload = function() {
alo();
}
index.html
…
<script src="page.js"></script>
…
Detalhes da linguagem
• JavaScript é case-sensitive (diferencia maiúsculas de 
minúsculas)
• Espaços em brancos são insignificantes
• Comentários em Javascript é semelhante ao Java
• As variáveis possuem tipos dinâmicos
• O uso do ponto e vírgula é opcional (desde que os 
comandos estejam em linhas separadas*)
Tipos de dados e Variáveis
• String
• Number
• Boolean
• undefined
var a = "Ola...";
var num1 = 100; var num2 = 100.10;
var ok = true; var fail = false;
var aux;• undefined
• Object
• Array
• Function
var aux;
var p = {nome: "João", idade: 32}
var lista = [2, 32, 31, 21, 98];
var fnc = function (){ };
Variáveis
• Locais começam com a palavra var
var x = "teste"
• Globais não começam com a palavra var• Globais não começam com a palavra var
x = "teste"
• Use sempre que preciso o comando console.log
para depurar o código Javascript
console.log(x, y, z);
Operadores aritméticos
Operador Descrição Exemplo Resultado
+ Adição x=y+2 x=7 y=5
- Subtração x=y-2 x=3 y=5
* Multiplicação x=y*2 x=10 y=5
/ Divisião x=y/2 x=2.5 y=5
Sabendo que y=5
/ Divisião x=y/2 x=2.5 y=5
% Módulo (resto da divisão) x=y%2 x=1 y=5
++ Incremento x=++y x=6 y=6
x=y++ x=5 y=6
-- Decremento x=--y x=4 y=4
x=y-- x=5 y=4
Operadores de atribuição
Operador Exemplo Como Resultado
= x=y x=5
+= x+=y x=x+y x=10
Sabendo que y=5
+= x+=y x=x+y x=10
-= x-=y x=x-y x=5
*= x*=y x=x*y x=25
/= x/=y x=x/y x=5
%= x%=y x=x%y x=0
Concatenação
txt1 = "Tenha um";
txt2 = "ótimo dia";
//txt3 = "Tenha umótimo dia";//txt3 = "Tenha umótimo dia";
txt3 = txt1 + txt2;
//txt4 = "Tenha um ótimo dia";
txt4 = txt1 + " " + txt2;
Selecionando objetos
• Selecionando pelo id
document.getElementById("NomeDoId");
• Selecionando o primeiro elemento• Selecionando o primeiro elemento
document.querySelector("seletor");
• Selecionando uma lista de elementos
document.querySelectorAll("seletor");
Alterando o conteúdo - innerHTML
<body>
<p></p>
<div id="resp">Texto</div>
<script>
var e = document.querySelector("#resp");
alert(e.innerHTML); //Exibe: Texto
var repete = e.innerHTML + e.innerHTML;
e.innerHTML = repete;
alert(e.innerHTML); //Exibe: TextoTexto
e.innerHTML = "Nova mensagem";
alert(e.innerHTML); //Exibe: Nova mensagem
document.querySelector("p").innerHTML = e.innerHTML;
</script>
</body> Ao final da execução do código o HTML final será:
<p>Nova mensagem</p>
<div id="resp">Nova mensagem</div>
Alterando os atributos
<body>
<p class="texto">Texto do parágrafo</p>
<img id="img" src="teste.png" alt="Teste">
<script>
var img = document.querySelector("#img");
//Alterando os atributos existentes
img.src = "outro.jpg";img.src = "outro.jpg";
img.alt = "Nova";
//Adicionando novos atributo
img.title = img.alt;
img.className = "retrato";
document.querySelector(".texto").id = "p1";
</script>
</body>
.
Ao final da execução do código o HTML final será:
<p class="texto" id="p1">Texto do parágrafo</p>
<img id="img" src="outro.jpg" alt="Nova" title="Nova" class="retrato">
Alterando os valores - value
<body>
<div id="resposta"></div>
<input type="text" name="senha">
<input type="button" value="Copiar" onclick="copia()">
<script>
function copia(){
//Atribuindo o texto do campo na variavel
var campo = document.querySelector("input[name=senha]"); 
var texto = campo.value;
//Atribuindo o valor do campo no elemento
document.querySelector("#resposta").innerHTML = texto;
//Alterando o valor do campo para vazio
campo.value = "";
}
</script>
</body>
Este código irá alterar o código HTML somente após o 
clique do botão. Eventos serão apresentado mais a frente
Operadores relacionais
Operador Descrição Exemplo
== É igual a x == 8 é falso
===
É exatamente igual (valor e
tipo)
x === 5 é verdadeiro
x === "5" é falso
Sabendo que x=5
=== tipo) x === "5" é falso
!= Diferente x != 8 é verdadeiro
> É maior que x > 8 é falso
< É menor que x < 8 é verdadeiro
>= É maior que ou igual a x >= 8 é falso
<= É menor que ou igual a x <= 8 é verdadeiro
Operadores lógico
Operador Descrição Exemplo
&& E (x < 10 && y > 1) é verdadeiro
|| OU (x == 5 || y == 5) é falso
Sabendo que x=6 e y=3
|| OU (x == 5 || y == 5) é falso
! Não !(x == y) é verdadeiro
Operador ternário
Sintaxe:
variavel = (condição) ? Valor1 : valor2;
Exemplo:Exemplo:
var extenso = (valor == 1) ? "unidade" : "unidades";
IF
Sintaxe:
if(condição){
//Código a ser executado se a condição é verdadeira
}
Exemplo:
<script ><script >
//Escreve "Bom dia" se a hora é menor que 10
var d=new Date();
var time = d.getHours();
if (time < 10){
alert("Bom dia");
}
</script>
IF...ELSE
Sintaxe:
if (condição){
// Código executado se a condição é verdadeira
} else {
// Código executado se a condição é falsa
}
Exemplo:
<script>
var d = new Date();
var time = d.getHours();
if (time < 10){
alert("Bom dia");
} else {
alert("Boa tarde");
}
</script>
IF...ELSE IF...ELSE
Sintaxe:
if (condição){
// Código executado se a condição é verdadeira
} else if (condição 2){
// Código executado se a condição 2 é verdadeira
} else {
// Código executado todas as condições são falsa
}
Exemplo:
<script>
var d = new Date();var time = d.getHours();
if (time < 10){
alert ("Bom dia");
} else if (time < 19){
alert("Boa tarde");
} else {
alert("Boa noite");
}
</script>
Switch
Exemplo:
<script>
//Mostra uma mensagem com base no dia da semana
//Domingo=0, Segunda=1, Terça=2, ...
var d = new Date();
var dia = d.getDay();
switch (dia){
case 5:case 5:
alert("Finalmente sexta-feira");
break;
case 6:
alert("Sábado!!!");
break;
case 0:
alert("Domingão");
break;
default:
alert("Boa semana de trabalho");
}
</script>
FOR
Sintaxe:
for( var=inicio; var<=fim; var++){
// Código a ser repetido
}
Exemplo:
<div id="a1"></div><div id="a1"></div>
<script>
var el = document.querySelector("#a1");
var i = 0;
for (i = 0; i <= 5; i++){
var texto = "<p>O número é " + i + "</p>";
el.innerHTML += texto;
}
</script>
WHILE
Sintaxe:
while (condição) {
// Código executado enquanto a condição é 
verdadeira
}
Exemplo:Exemplo:
<div id="a1"></div>
<script>
var el = document.querySelector("#a1");
var i = 0;
while (i <= 5){
el.innerHTML += "O número é " + i + "<br>";
i++;
}
</script>
DO..WHILE
Sintaxe:
do {
// Código executado enquanto a condição é verdadeira
} while (condição);
Exemplo:
<div id="a1"></div>
<script>
var el = document.querySelector("#a1");
var i = 0;
do {
el.innerHTML += "O número é " + i + "<br>";
i++;
} while (i <= 5);
</script>
Break e Continue
<script>
for (var i = 1; i <= 10; i++){
if (i ==3) {
continue; //Pula o alert
} else if (i == 5) {
break; //Encerra a execução
}
alert(i);
}
</script>
Irá exibir apenas: 1, 2, 4
Caixas de diálogo
Alerta
alert("Ola a todos!");
Caixa de confirmação
var opcao = confirm("Confirma a exclusão?");
if (opcao == true) { if (opcao == true) { 
// Sim, confirma
} else {
//Não, não confirmou
}
Entrada de texto
var nome = prompt("Informe um nome", "Ana");
var elem = document.querySelector("#a");
elem.innerHTML = "Olá " + nome;
Funções
Função com argumentos:
function nomeDaFuncao(var1,var2,...,varX){
// Código da função
}
nomeDaFuncao(2, 32, ..., 1);
Função em uma variável:Função em uma variável:
var funcao = function () {
// Código da função
}
funcao();
Função como um método:
var obj = { metodo: function () { } }
obj.metodo();
Exemplo de função
<script>
function produto(a, b) {
return a * b;
}
function calcular() {
var n1 = document.querySelector("[name=n1]");var n1 = document.querySelector("[name=n1]");
var n2 = document.querySelector("[name=n2]");
alert(produto(n1.value, n2.value));
}
</script>
<input type="text" name="n1">
<input type="text" name="n2">
<input type="button" value="Calcular" 
onclick="calcular()">
Eventos
Eventos do mouse
onclick , ondblclick, onmousemove, onmousedown, 
onmouseup, onmouseover e onmouseout
Carregamento de uma imagem, páginaCarregamento de uma imagem, página
onload e onunload
Eventos do formulário
onsubmit, onchange, onselect, onfocus e onblur
Digitar uma tecla
onkeydown, onkeyup, onkeypress
Utilizando eventos
No HTML:
<input type="text" onchange="troca()" id="txt">
<input type="button" value="Carregar" 
onclick="carrega('txt')">
No Javascript:
<input type="text" id="txt"><input type="text" id="txt">
<input type="button" value="Carregar">
<script>
document.querySelector("#txt").onchange = troca;
var btn = document.querySelector("[type=button]");
btn.onclick = function () { 
carrega('txt') 
};
</script>
<script>
var lista = [1, 2, 3, 1];
console.log(lista.length); //4
Utilizado para exibir o resultado 
Vetores
console.log(lista.pop()); // 1
console.log(lista); //1, 2, 3
</script>
Utilizado para exibir o resultado 
no console do navegador
Array - Principais métodos
Método Descrição
concat(array2, array3,...,arrayX)
Junta dois ou mais vetores, retornando-o. Não altera o vetor
atual.
join([separador])
Retorna uma String de todos os elementos do vetor, juntando-os
com o separador. Caso não seja fornecido será utilizado a
virgula.
pop() Remove o último elemento do vetor e retorna-o
push(novo1, novo2, …, novoX) Adiciona novos elementos ao final do vetor
reverse() Inverte a ordem dos elementos do vetor (altera o vetor)
shift() Remove o primeiro elemento do vetor e retorna-o
slice(inicio, [fim])
Seleciona uma parte do vetor e retorna esta parte, não altera a
origem.
sort([funcao-ordenacao])
Ordena os elementos do vetor (altera o vetor). Caso seja
passado uma função ele ordena utilizando a função (que recebe
dois parâmetros)
splice(inicio, qtd-remove, novo1, novo2, …, novoX) Adiciona e/ou remove elementos de um vetor
toString() Semelhante ao Join
unshift(novo1, novo2, …, novoX) Adiciona novos elementos a um vetor.
String – Principais métodos
Método Descrição
charAt(index) Retorna o caractere correspondente a posição informada
charCodeAt(index) Retorna o unicode correspondente a posição informada
concat(string2, string3,..., stringX) Concatena duas ou mais Strings e retorna a nova String
indexOf(str-busca, [inicio])
Retorna a posição da primeira ocorrência encontrada a partir do início. Se
não encontrar retorna -1
lastIndexOf(str-busca, [inicio])
Retorna a posição da ultima ocorrência encontrada a partir do início. Se
não encontrar retorna -1
replace(substring,nova-string) Substitui uma parte da String por uma nova Stringreplace(substring,nova-string) Substitui uma parte da String por uma nova String
search(string)
Procura a localização de uma parte da String e retorna sua localização.
Se não encontrar retorna -1
slice(inicio,[fim]) Extrai uma fatia da String, especificado entre início e fim (altera a String).
split(separador, [limite])
Divide uma String em um vetor utilizando o separador. Se uma String
vazia é passada como separador a String é dividade para cada caractere.
substr(inicio, [tamanho])
Retorna uma substring pegando a partir de início no tamanho
especificado.
substring(inicio, [fim]) Semelhante ao slice, contudo não altera a String de origem
toLowerCase() Converte a String para minúscula
toUpperCase() Converte a String para maiúscula
Data – Principais métodos
Método Descrição
getDate() Retorna o dia do mês (1 a 31)
getDay() Retorna o dia da semana (0 a 6)
getFullYear() Retorna o ano (com 4 dígitos)
getHours() Retorna a hora (0 a 23)
getMilliseconds() Retorna os milissegundos (0 a 999)
getMinutes() Retorna os minutos (0 a 59)
getMonth() Retorna o mês (0 a 11)
getSeconds() Retorna os segundos (0 a 59)getSeconds() Retorna os segundos (0 a 59)
getTime()
Retorna o número de millisegundos a partir de 1 de janeiro de
1970
getTimezoneOffset() Retorna a diferença (em minutos) entre o GMT e o tempo local
setDate(dia) Define o dia do mês (1 a 31)
setFullYear(ano, [mes], [dia]) Define o ano (quatro dígitos), e opcionalmente o mês e o dia
setHours(hora, [min], [sec], [milsec])
Define uma hora (0 a 23), e opcionalmente os minutos, segundos
e milissegundos
setMilliseconds(milisegundos) Define o milissegundos (0 a 999)
setMinutes(min, [sec], [milsec])
Define os minutos (0 a 59), e opcionalmente os segundos e
milissegundos
setMonth(mes, dia) Define o mês (0 a 11), e opcionalmente o dia
setSeconds(sec, [milsec]) Define os segundos (0 a 59) e opcionalmente os milissegundos
setTime(milissegundos)
Define um Date com base nos milissegundos a partir de 1 de
janeiro de 1970
Funções matemáticas
Método Descrição
Math.abs(x) Retorna o valor absoluto de X
Math.ceil(x) Retorna o próximo inteiro mais próximo de X
Math.floor(x) Retorna o inteiro anterior mais próximo de X
Math.max(x, y, z, …, n) Retorna o maior número passado na lista de valoresMath.max(x, y, z, …, n) Retorna o maior número passado na lista de valores
Math.min(x, y, z, …, n)Retorna o menor número passado na lista de valores
Math.pow(x, y) Retorna o valor de X elevado a Y
Math.random() Retorna um número aleatório entre 0 e 1
Math.round(x) Retorna o X arredondado para o inteiro mais próximo
Math.sqrt(x) Retorna a raiz quadrada de x
Funções globais
Método Descrição
encodeURI(uri) Retorna uma URI codificada
decodeURI(uri) Retorna uma URI decodificada
eval(string) Executa um código em Javascript
Number(value) Converte um valor em número
parseFloat(string) Converte uma String em um valor do tipo float
parseInt(string, [base])
Converte uma String em um valor do tipo inteiro,
se uma base (valor entre 2 e 36) é passado
utiliza-se a base de número utilizado
String(numero) Converte um valor em uma String