Mudanças entre as edições de "Javascript: introdução"
(Criou página com 'Afluentes: Desenvolvimento Front-end I, Desenvolvimento Front-end II, Usabilidade, desenvolvimento web, mobile e jogos = Definições = O Javascript, ou apenas J...') |
|||
| Linha 108: | Linha 108: | ||
document.write("Hello world!"); | document.write("Hello world!"); | ||
</script> | </script> | ||
| + | </body> | ||
| + | </html> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == 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: | ||
| + | |||
| + | <syntaxhighlight lang=html> | ||
| + | <script> | ||
| + | document.write("<h2>"+document.title+"</h2>"); | ||
| + | </script> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == Alterando um Conteúdo == | ||
| + | |||
| + | <syntaxhighlight lang=html> | ||
| + | <p id="paragrafo">Olá!</p> | ||
| + | <script> | ||
| + | function minhaFuncao() { | ||
| + | var x = document.getElementById("paragrafo"); | ||
| + | x.innerHTML="Hello!"; | ||
| + | } | ||
| + | </script> | ||
| + | <button type="button" onclick="minhaFuncao();">Translate</button> | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | == 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. | ||
| + | |||
| + | <center>[[Image:switch_on.png|100px]]</center> | ||
| + | <center>[[Image:switch_off.png|100px]]</center> | ||
| + | |||
| + | <syntaxhighlight lang=html> | ||
| + | <!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> | </body> | ||
</html> | </html> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
Edição das 13h40min de 15 de abril de 2024
Afluentes: Desenvolvimento Front-end I, Desenvolvimento Front-end II, 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>
