Baixe o app para aproveitar ainda mais
Leia os materiais offline, sem usar a internet. Além de vários outros recursos!
Introdução ao JavaScript
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Faça como milhares de estudantes: teste grátis o Passei Direto
Esse e outros conteúdos desbloqueados
16 milhões de materiais de várias disciplinas
Impressão de materiais
Agora você pode testar o
Passei Direto grátis
Compartilhar
Prévia do material em texto
Introdução ao
JavaScript
Profa Ms. Cláudia Zambon
JavaScript
• Originalmente criada na Netscape por Brendan Eichem 1994;
• Também chamada de JS, é a linguagem de criação de scripts para a
Web;
• É utilizado por bilhões de páginas para:
• Adicionar funcionalidades;
• Verificar formulários;
• Comunicar com servidores;
• E muitos mais.
Java vs JavaScript
• São “coisas” completamente distintas e desconexas;
• Compartilham apenas um passado de “disputa territorial” contra a
Microsoft;
• JavaScript reside dentro de documentos HTML;
• Pode prover diferentes níveis de interatividades não suportados pelo
HTML sozinho.
Algumas diferenças chaves em relação ao
Java
– Java é uma linguagem de programação;
– JavaScript é uma linguagem de script;
– Aplicativos Java são executados pela máquina virtual Java;
– Scripts JavaScript são executados pelos browsers;
– Java é compilado;
– JavaScript é texto puro.
Tag
• Para inserir códigos JavaScript, iremos fazê-lo em uma Tag HTML
apropriada:
<script>
</script>
• O JavaScript é orientado a objetos.
JavaScript Externo
• Da mesma forma como nos arquivos CSS, podemos deixar funções e
comandos JavaScript em arquivos externos:
• Estes arquivos devem ter a extensão .JS
• Para importar:
<script src = "meuScript.js"></script>
Hello World
• Crie uma nova página;
• Dentro da seção <body> insira o trecho:
<script>
document.write("HelloWorld!");
</script>
• Neste caso, o trecho “escrito” pelo JavaScript, será incorporado ao
HTML apenas em sua construção.
Classe document
• Propriedades de Exemplo:
– title – Define ou Retorna o Título da Página;
– URL – Retorna o URL completo da página;
• Métodos de Exemplo:
– write() – Escreve texto no documento;
– writeln() – Escreve uma linha de texto no documento.
Hello World
• Na página criada anteriormente;
– Defina um título: “JavaScript Hello World!”;
• Altere o script:
<script>
document.write("<h2>" + document.title + "</h2>");
</script>
• Neste caso, o trecho “escrito” pelo JavaScript, será incorporado ao
HTML apenas em sua construção.
Reagindo a Eventos
• É possível disparar scripts a partir de diversos tipos de eventos;
• O primeiro que iremos estudar é o de um clique em um botão:
<button> CliqueAqui! </button>
• Atributos:
type = “button”;
onclick = “alert(‘Bemvindo!’)”
<button type = "button" onclick = "alert ('Bem vindo!')"> Clique Aqui!
</button>
Variáveis
• JavaScript é uma linguagem de tipagem dinâmica e fraca:
• Não é necessário declarar o tipo de uma variável;
• Todas as variáveis são objetos (referência);
• Números são todos reais de 64 bits;
• A variável irá “alterar” o seu tipo de dado conforme os valores forem
atribuídos:
Variáveis
• Tipo de dado dinâmico:
var x; // x é indefinido
x = 5; // x é um número
x = "John"; // x é uma string
x = true; // x é um valor lógico
x = null; // x é indefinido
Recebendo uma entrada:
• HTML:
• JavaScript
<!DOCTYPE html>
<html lang="pt-br">
<head>
<title>Título da página</title>
<meta charset="utf-8">
</head>
<body>
Aqui vai o código HTML que fará seu
site aparecer.
</body>
</html>
var a = 33;
var b = 10;
var c = "Test";
var linebreak = "<br />";
document.write("a + b = ");
result = a + b;
document.write(result);
document.write(linebreak);
a + b = 43
OPERADORES ARITMÉTICOS
document.write("a - b = ");
result = a - b;
document.write(result);
document.write(linebreak);
document.write("a / b = ");
result = a / b;
document.write(result);
document.write(linebreak);
a - b = 23
a / b = 3.3
document.write("a % b = ");
result = a % b;
document.write(result);
document.write(linebreak);
a % b = 3
document.write("a + b + c = ");
result = a + b + c;
document.write(result);
document.write(linebreak);
a + b + c = 43Test
a = a++;
document.write("a++ = ");
result = a++;
document.write(result);
document.write(linebreak);
b = b--;
document.write("b-- = ");
result = b--;
document.write(result);
document.write(linebreak);
a++ = 33
b-- = 10
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write("(a == b) => ");
result = (a == b);
document.write(result);
document.write(linebreak);
(a == b) => false
OPERADORES CONDICIONAIS
document.write("(a < b) => ");
result = (a < b);
document.write(result);
document.write(linebreak);
document.write("(a > b) => ");
result = (a > b);
document.write(result);
document.write(linebreak);
(a < b) => true
(a > b) => false
document.write("(a != b) => ");
result = (a != b);
document.write(result);
document.write(linebreak);
document.write("(a >= b) => ");
result = (a >= b);
document.write(result);
document.write(linebreak);
(a >= b) => false
(a != b) => true
document.write("(a <= b) => ");
result = (a <= b);
document.write(result);
document.write(linebreak);
(a <= b) => true
var c = ‘20’;
document.write("(b == c) => ");
result = (b == c);
document.write(result);
document.write(linebreak);
(b == c) => true
(b === c) => false
document.write("(b === c) => ");
result = (b === c);
document.write(result);
document.write(linebreak);
OPERADORES LÓGICOS
var a = true;
var b = false;
var linebreak = "<br />";
document.write("(a && b) => ");
result = (a && b);
document.write(result);
document.write(linebreak);
(a && b) => false
document.write("(a || b) => ");
result = (a || b);
document.write(result);
document.write(linebreak);
document.write("!(a && b) => ");
result = (!(a && b));
document.write(result);
document.write(linebreak);
!(a && b) => true
(a || b) => true
var a = 33;
var b = 10;
var linebreak = "<br />";
ATRIBUIÇÕES
document.write("Value of a => (a = b) => ");
result = (a = b);
document.write(result);
document.write(linebreak); Value of a => (a = b) => 10
document.write("Value of a => (a += b) => ");
result = (a += b);
document.write(result);
document.write(linebreak);
document.write("Value of a => (a -= b) => ");
result = (a -= b);
document.write(result);
document.write(linebreak);
Value of a => (a += b) => 20
Value of a => (a -= b) => 10
document.write("Value of a => (a *= b) => ");
result = (a *= b);
document.write(result);
document.write(linebreak)
document.write("Value of a => (a /= b) => ");
result = (a /= b);
document.write(result);
document.write(linebreak);
Value of a => (a *= b) => 100
Value of a => (a /= b) => 10
document.write("Value of a => (a %= b) => ");
result = (a %= b);
document.write(result);
document.write(linebreak);
Value of a => (a %= b) => 0
OPERADOR CONDICIONAL ? :
var a = 10;
var b = 20;
var linebreak = "<br />";
document.write ("((a > b) ? 100 : 200) => ");
result = (a > b) ? 100 : 200;
document.write(result);
document.write(linebreak);
((a > b) ? 100 : 200) => 200
document.write ("((a < b) ? 100 : 200) => ");
result = (a < b) ? 100 : 200;
document.write(result);
document.write(linebreak);
((a < b) ? 100 : 200) => 100
TIPOS DE VARIÁVEIS
var a = 10;
var b = "String";
var linebreak = "<br />";
result = (typeof b == "string" ? "B is String" : "B is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
result = (typeof a == "string" ? "A is String" : "A is Numeric");
document.write("Result => ");
document.write(result);
document.write(linebreak);
Result => B is String
Result => A is Numeric
Material utilizado:
• http://docente.ifsc.edu.br/vilson.junior/pi/04_Introducao_JavaScript.pdfMateriais relacionados
75 pág.
93 pág.
162 pág.
Perguntas relacionadas
Compartilhar