Mudanças entre as edições de "Javascript: introdução"

De Aulas
(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...')
 
 
(3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
−
Afluentes: [[Desenvolvimento Front-end I]], [[Desenvolvimento Front-end II]], [[Usabilidade, desenvolvimento web, mobile e jogos]]
+
Afluentes: [[Desenvolvimento Front-end I]], [[Usabilidade, desenvolvimento web, mobile e jogos]].
  
 
= Definições =
 
= Definições =
Linha 111: Linha 111:
 
</html>
 
</html>
 
</syntaxhighlight>
 
</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>
 +
</html>
 +
</syntaxhighlight>
 +
 +
 +
== 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;
 +
 +
<syntaxhighlight lang=html>
 +
<!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>
 +
</syntaxhighlight>
 +
 +
= 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

Edição atual tal como às 09h54min de 22 de abril de 2024

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.


Tplnote Bulbgraph.png

Java não é Javascript!

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.

Switch on.png
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
Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Javascript:_introdução&oldid=9241”