Javascript: introdução
Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos.
Definições
O Javascript, ou apenas JS, é uma linguagem scriptt para aplicações web. Foi criada por Brendan Eich da Netscape em 1994.
Propósito:
- Verificar formulários;
- Comunicação com servidores ou serviços web;
- Gerenciar dinamicamente objetos de uma página web;
- Adicionar novas funcionalidades e muito mais.
|
Não é possível criar applets ou aplicativos com javavscript. A linguagem é encapsulada em documentos HTML e pode prover diferentes níveis de interatividades que o HTML por si só não suporta.
As principais diferenças entre Java e Javascript são:
- Java é uma linguagem de programação e Javascript uma linguagem de script;
- Aplicativos Java executam na maquina virtual java e scripts Javascript nos browsers;
- Java é compilado e Javascript é texto puro;
- Cada uma dessas tecnologias requerem plugins diferentes.
Atualmente, o maior mantenedor da linguagem é a Fundação Mozilla.
Manuais e tutoriais:
Padrões Javascript
- Linguagem Núcleo:
- ECMAScript: atual ECMA-402, versão 7, de Junho de 2020.
- Mantido pela ECMA: Associação industrial internacional de padronização de tecnologias da informação e comunicação.
- DOM:
- Document Object Model;
- Definição da interface da linguagem com o browser;
- Mantido pela W3C.
Linguagem
A linguagem Javascript é orientada a objetos, sendo que a primeira classe é a clase document
Existem três formas de usar javascript em uma página web, tal como CSS:
inline
Dentro de uma tag, utiliza-se um atributo de ação, por exemplo onclick para inserir parte do código javascript.
<button onclick="alert('Hello!')">Print this page</button>
Interno
A linguagem precisa de uma tag htm para inserir códigos Javascript em uma página web:
<script>
//...
</script>
Por exemplo:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
</script>
</head>
<body>
<h2>JavaScript in Head</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Try it</button>
</body>
</html>
Externo
O script é editado em um arquivo separado com extensão .js e importado dentro do código html.
<script src="meu_script.js"></script>
Exemplo Hello World
No exemplo a seguir, o texto "Hello world!" é incorporado ao HTML na construção do documento
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<script>
document.write("Hello world!");
</script>
</body>
</html>
Classe document
Usando a classe document, podemos pegar alguns atributos, alterá-los ou utilizá-los em nosso script. O exemplo abaixo cria um cabeçalho com o título da página:
<script>
document.write("<h2>"+document.title+"</h2>");
</script>
Alterando um Conteúdo
<p id="paragrafo">Olá!</p>
<script>
function minhaFuncao() {
var x = document.getElementById("paragrafo");
x.innerHTML="Hello!";
}
</script>
<button type="button" onclick="minhaFuncao();">Translate</button>
Alterando um Atributo
O exemplo a seguir altera o atributo src de uma imagem. Quando a imagem é clicada, altera entre switch_on.png e switch_off.png.
<!DOCTYPE html>
<html>
<head>
<title>Switch</title>
</head>
<body>
<h2>Clique na chave para ligar e desligar</h2>
<p>
<img id="my_switch" onclick="changeSwitch()" src="switch_off.png" width="100px">
</p>
<script>
function changeSwitch() {
var e = document.getElementById("my_switch");
console.log(e.src.indexOf("on"));
if (e.src.indexOf("off") >= 0) {
e.src = "switch_on.png";
} else {
e.src = "switch_off.png";
}
}
</script>
</body>
</html>
Entradas de Dados
O exemplo a seguir pega as informações dos campos x e y de entrada, soma e mostra a resposta em out;
<!DOCTYPE html>
<html>
<head>
<title>Soma</title>
</head>
<body>
<label for="x">x:</label>
<input type="text" id="x"><br>
<label for="y">y:</label>
<input type="text" id="y"><br>
<label for="out">out</label>
<input type="text" disabled id="out"><br>
<button type="button" onclick="somar()">somar</button>
<script>
function somar() {
x = parseInt(document.getElementById("x").value);
y = parseInt(document.getElementById("y").value);
out = x + y;
document.getElementById("out").value = out;
}
</script>
</body>
</html>
Atividades
Atividade 1
- Crie um documento HTML
- Coloque um campo texto para digitar um nome
- Coloque um botão OK
- Ao clicar no botão, abre uma janelinha popup mostrando o nome digitado no campo texto
- Faça esse exercício em três versões, usando javascript das três formas: inline, interno e externo
Atividade 2
- Crie um documento HTML
- Adicione um título H1 na página com texto vazio
- Adicione um campo texto de entrada com label Nome
- Adicione um botão OK
- Quando clicar no botão OK, altere o título H1 para o conteúdo que está no campo texto
