Mudanças entre as edições de "Javascript: elementos básicos da linguagem"

De Aulas
 
(4 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]].
  
 
== Variáveis ==
 
== Variáveis ==
Linha 122: Linha 123:
 
animes[0] = 'Neon Genesis Evangelion';
 
animes[0] = 'Neon Genesis Evangelion';
 
animes[1] = 'Spice and Wolf';
 
animes[1] = 'Spice and Wolf';
−
console.log(alunos[0]);
+
console.log(animes[0]);
 
</syntaxhighlight>
 
</syntaxhighlight>
  
 
Para adicionar um novo elemento no final da array, usamos <code>push</code>. E para acessarmos em um laço todos os elementos da nossa array, podemos usar um laço <code>for</code>, o método <code>forEach</code> ou <code>map</code>. Aqui vamos ver com for e forEach.
 
Para adicionar um novo elemento no final da array, usamos <code>push</code>. E para acessarmos em um laço todos os elementos da nossa array, podemos usar um laço <code>for</code>, o método <code>forEach</code> ou <code>map</code>. Aqui vamos ver com for e forEach.
  
−
<syntaxhighlight lang=javascript>
+
<syntaxhighlight lang="javascript">
−
var alunos = ['Rei', 'Asuka', 'Shiji', 'Kaworu'];
+
let alunos = ['Rei', 'Asuka', 'Shiji', 'Kaworu'];
−
alunos.push('Kensuke');
 
  
 
// Laço for
 
// Laço for
−
for(let i = 0; i < alunos.length; i = i + 1 ) {
+
for (let i = 0; i < alunos.length; i++) {
−
     console.log('[for]', alunos[i]);
+
     console.log('[for]', alunos[i], i);
 
}
 
}
  
−
// método forEach
+
alunos.push('Kensuke');
−
nomes.forEach(function(alunos, i) {
 
−
    console.log('[forEach]', alunos, i);
 
−
})
 
 
</syntaxhighlight>
 
</syntaxhighlight>
  
−
Mais sobre arrays na [https://www.w3schools.com/jsref/jsref_obj_array.asp w3school].
+
== Iteradores ==
 +
Outra forma de trabalhar com laços são os iteradores. No código abaixo vemos dois exemplos de iteradores, o <code>map</code> e o <code>forEach</code>. Eles são métodos usados em vetores para executar uma função em cada um dos elementos do vetor. A diferença entre o <code>map</code> e o <code>forEach</code> é que o map executa e retorna um vetor com o resultado, e podemos usar o <code>join</code> para transformar o vetor em uma <code>string</code>, e o <code>forEach</code> apenas executa uma função. Ele por si, não retorna nada.<syntaxhighlight lang="html">
 +
<!DOCTYPE html>
 +
<html>
 +
<head><title>Iteradores</title></head>
 +
<body>
 +
    <h1>Iteradores</h1>
 +
    <div id="root"></div>
 +
    <script>
 +
        let alunos = ['Rei', 'Asuka', 'Shiji', 'Kaworu'];
 +
 
 +
        // O map retorna um novo vetor com os valores
 +
        // retornados pela função passada como argumento
 +
        const iteractor_map = (vetor) => (
 +
            vetor.map((valor, index) => (
 +
                `<p>[map] ${index} - ${valor}</p>`
 +
            )).join("") // O join transforma o vetor em uma string
 +
        );
 +
 
 +
        // O forEach não retorna nada, apenas executa a função
 +
        // passada como argumento para cada elemento do vetor
 +
        const iteractor_forEach = (vetor) => {
 +
            vetor.forEach((valor, index) => {
 +
                console.log(`[forEach] ${index} - ${valor}`);
 +
            });
 +
        };
 +
 
 +
        iteractor_forEach(alunos);
 +
 
 +
        document.getElementById('root').innerHTML = iteractor_map(alunos);
 +
    </script>
 +
</body>
 +
</html>
 +
</syntaxhighlight>Mais sobre arrays na [https://www.w3schools.com/jsref/jsref_obj_array.asp w3school].
 +
 
 +
= Desafio =
 +
 
 +
Os desafios normalmente são exercícios um pouco mais complexos que exigem um pouco mais. O importante não é fazer tudo, é tentar fazer o máximo que puder no seu próprio ritmo. O importante é ver nos manuais, tutoriais, pesquisar, tentar entender o que está fazendo. Lembre-se que no processo de aprendizagem, tudo é mais difícil e são nas dificuldades que aprendemos.
 +
 
 +
É de maior valor quem faz mais simples, mas entendeu o que fez do que aquela pessoa que copiou ou pediu para alguém fazer por ela.
 +
 
 +
Essas atividades podem ser desenvolvidas em grupo ou, se preferir, individualmente.
 +
 
 +
Essas atividades fazem parte de um processo de aprendizagem pelo "aprender fazendo", então vocês podem adicionar mais características ou funcionalidades, mudar o formato, etc.. Deixem a criatividade fluir. Quanto mais vocês fizerem na atividade, mais vão aprender.
 +
 
 +
== Atividade ==
 +
 
 +
Desenvolver uma calculadora na WEB usando HTML, CSS e Javascript.
 +
* Organize os componentes e botões conforme a imagem abaixo.
 +
* Observe que há um histórico dos cálculos já efetuados.
 +
* Coloque um botão para alterar o tema das cores: modo diurno e modo noturno.
 +
 
 +
<center>[[Image:Android_calculadora.png]]</center>

Edição atual tal como às 15h04min de 6 de maio de 2025

Afluentes: Desenvolvimento Front-end I, Usabilidade, desenvolvimento web, mobile e jogos.

Variáveis

A linguagem Javascript possui um sistema de variáveis com tipagem fraca e dinâmica:

  • Não precisa declarar o tipo;
  • Todas variáveis são objetos (referência);
  • Os numéros são reais de 64bits;
  • A variável muda seu tipo dinamicamente conforme os valores forem atribuídos.
1var x;
2x = 34;
3x = false;
4x = "Misato Katsuragi";
5x = null;

Contexto das Variáveis

  • Quando você usar var fora de uma função, ela pertence ao escopo global.
  • Quando você usar var dentro de uma função, ela pertence aquela função.
  • Quando você usar var dentro de um bloco, a variável estará disponível fora daquele bloco também
var x = 5.6;
  • A palavra chave let é um tipo de variável para o escopo de um bloco e limitada aquele bloco e apenas aquele bloco.
let x = 5.6;
  • Uma const é uma variável que, uma vez criada, seu valor não pode mais ser alterado.
const x = 5.6;

Operadores

+ soma de números ou concatenação de strings
- subtração de números
* multiplicação de números
/ divisão de números (Sempre divisão real)
% resto da divisão
++ incremento
-- decremento

Operadores de Comparação

== valor igual. (5 == “5”) retorna true.
=== valor e tipo iguais. (5 === “5”) retorna false
!= valor diferente. (5 != “5”) retorna false
!== valor e tipos diferentes. (5 !== “5”) returna true 
> maior
< menor
>= maior ou igual
<= menor ou igual
&& e (and)
|| ou (or)
! não (not)

Estrutura de Decisão

If else funciona tal como Java e C: 

if (condicao) {
   // Codigo a executar caso a condição seja verdadeira
} else {
  // Código a executar caso seja falsa
}

O switch case também funciona igual.

Estruturas de Repetição

for, while e do while funcionam da mesma forma como Java e C, incluindo os comandos continue e break 

for (i = 0; i < 10; i++) {
  // Código a executar
}

while (i < 100) {
  // Código a executar
}

do {
  // Código a executar
} while (x < 10);

Vetores

Os vetores, ou arrays, são variáveis que podem armazenar um conjunto de informações, geralmente do mesmo tipo. Abaixo temos exemplos de criação de variáveis do tipo array: 

var alunos = ['Rei', 'Asuka', 'Shiji', 'Kaworu'];
let animes = ['Neon Genesis Evangelion', 'Spice and Wolf', 'Daemon Slayer'];

No Javascript também é possível declarar array sem um tamanho definido ou com um tamanho. Por exemplo: 

var alunos = Array(10);
let animes = [];

E podemos adicionar e acessar elementos específicos: 

let animes = Array(10);
animes[0] = 'Neon Genesis Evangelion';
animes[1] = 'Spice and Wolf';
console.log(animes[0]);

Para adicionar um novo elemento no final da array, usamos push. E para acessarmos em um laço todos os elementos da nossa array, podemos usar um laço for, o método forEach ou map. Aqui vamos ver com for e forEach. 

let alunos = ['Rei', 'Asuka', 'Shiji', 'Kaworu'];  

// Laço for
for (let i = 0; i < alunos.length; i++) {
    console.log('[for]', alunos[i], i);
}

alunos.push('Kensuke');

Iteradores

Outra forma de trabalhar com laços são os iteradores. No código abaixo vemos dois exemplos de iteradores, o map e o forEach. Eles são métodos usados em vetores para executar uma função em cada um dos elementos do vetor. A diferença entre o map e o forEach é que o map executa e retorna um vetor com o resultado, e podemos usar o join para transformar o vetor em uma string, e o forEach apenas executa uma função. Ele por si, não retorna nada.

<!DOCTYPE html>
<html>
<head><title>Iteradores</title></head>
<body>
    <h1>Iteradores</h1>
    <div id="root"></div>
    <script>
        let alunos = ['Rei', 'Asuka', 'Shiji', 'Kaworu'];

        // O map retorna um novo vetor com os valores
        // retornados pela função passada como argumento
        const iteractor_map = (vetor) => (
            vetor.map((valor, index) => (
                `<p>[map] ${index} - ${valor}</p>`
            )).join("") // O join transforma o vetor em uma string
        );

        // O forEach não retorna nada, apenas executa a função
        // passada como argumento para cada elemento do vetor
        const iteractor_forEach = (vetor) => {
            vetor.forEach((valor, index) => {
                console.log(`[forEach] ${index} - ${valor}`);
            });
        };

        iteractor_forEach(alunos);

        document.getElementById('root').innerHTML = iteractor_map(alunos);
    </script>
</body>
</html>

Mais sobre arrays na w3school.

Desafio

Os desafios normalmente são exercícios um pouco mais complexos que exigem um pouco mais. O importante não é fazer tudo, é tentar fazer o máximo que puder no seu próprio ritmo. O importante é ver nos manuais, tutoriais, pesquisar, tentar entender o que está fazendo. Lembre-se que no processo de aprendizagem, tudo é mais difícil e são nas dificuldades que aprendemos.

É de maior valor quem faz mais simples, mas entendeu o que fez do que aquela pessoa que copiou ou pediu para alguém fazer por ela.

Essas atividades podem ser desenvolvidas em grupo ou, se preferir, individualmente.

Essas atividades fazem parte de um processo de aprendizagem pelo "aprender fazendo", então vocês podem adicionar mais características ou funcionalidades, mudar o formato, etc.. Deixem a criatividade fluir. Quanto mais vocês fizerem na atividade, mais vão aprender.

Atividade

Desenvolver uma calculadora na WEB usando HTML, CSS e Javascript.

  • Organize os componentes e botões conforme a imagem abaixo.
  • Observe que há um histórico dos cálculos já efetuados.
  • Coloque um botão para alterar o tema das cores: modo diurno e modo noturno.
Android calculadora.png
Disponível em “https://saulo.arisa.com.br/wiki/index.php?title=Javascript:_elementos_básicos_da_linguagem&oldid=9867”