WebDev

JavaScript

Aula 5

Tipos, variáveis, desvios. Manipulação do DOM. Eventos.

USPCodeLab

Facebook:

https://facebook.com/uspcodelab/

Este trabalho do USPCodeLab  está licenciado com uma Licença Creative Commons - Atribuição 4.0 Internacional

O USPCodeLab é um grupo de extensão que tem como objetivo estimular a inovação tecnológica na USP

Site:

https://codelab.ime.usp.br/

JavaScript

Finalmente podemos falar de programação

Roda no navegador e fora dele

Dar vida a páginas web

Desvios lógicos

Atribuição de variáveis

Variáveis (e constantes)

"variáveis"

{

variáveis

constantes

ou

armazenar e articular dados

declaradas com keywords let e const

Variáveis (e constantes)

let mensagem;

mensagem = "Essa é uma 'variável' variável";

mensagem = "Pode alterar o valor dela";
const mensagem = "Essa é uma 'variável' constante";

mensagem = "Não pode alterar o valor dela";

// Thrown:
// TypeError: Assignment to constant variable.

Não podemos alterar seu valor

Tipos Básicos

typeof 0            // "number"
typeof 1.4          // "number"

typeof 'c'          // "string"
typeof "foo"        // "string"

typeof true         // "boolean"
typeof false        // "boolean"

typeof undefined    // "undefined"

typeof null         // "object"

Mas o que podemos guardar dentro das variáveis?

Listas e objetos 

Operadores Algébricos

1 + 4          // 5

3.1 - 4.1      // -1

0.3333333333333333 * 3 // 1

10 / 4         // 2.5

17 % 10        // 7

2 ** 10        // 1024


let x, y, z;

x = 4;
y = x + 1;       // y = 5

z = (y * 3) % x; // ???

z ** 3           // ???
let x, y, z;

x = 4;
y = x + 1;       // y = 5

z = (y * 3) % x; // 3

z ** 3           // 27

Operadores Lógicos

2 > 4        // false

1 >= 1       // true

2 < 4        // true

1 <= 1       // true

1 == 1       // true

1 != 1       // false

1 === true   // false

1 === 1      // true
Operador ! (NOT)
valor | NOT
------+-------               !true  // false
true  | false                !false // true
false | true

Operador && (AND)
 AND  | true  | false        true  && true  // true
------+-------+-------       true  && false // false
true  | true  | false        false && true  // false
false | false | false        false && false // false

Operador || (OR)
  OR  | true  | false        true  || true  // true
------+-------+-------       true  || false // true
true  | true  | true         false || true  // true
false | true  | false        false || false // false

Variáveis (e constantes)

const x = 2,
      y = 4;

let answer;

answer = x < y;
console.log(answer);
// true

answer = 2*x < y;
console.log(answer);
// false

answer = y - x >= 0;
console.log(answer);
// true

Desvios condicionais

const r = Math.random();
const dado = Math.ceil(r * 6);
let resultado;

Matemática: piso e teto

if (dado >= 5) {
    resultado = "Ganhou!";
}

Jogo de dados, regras:

  • SE jogou 5 ou mais, ganha
  • SENÃO perde

Math.random() - JavaScript | MDN

else {
    resultado = "Perdeu!";
}
console.log(resultado);

Desvios condicionais

r: aleatório
dado: teto(6*r)
dado >= 5?

sim

não

resultado: "Ganhou!"
resultado: "Perdeu!"
exibe resultado

O que aconteceu?

Juntando as coisas

Relembrando o DOM

<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <a href="">My link</a>
    <h1>Header</h1>
  </body>
</html>

html

head

body

title

a

h1

href

Header

My link

HTML

Selecionando elementos na DOM

document.querySelector()

- Seleciona um elemento da DOM passando um seletor

- ID, Classe, Tag ....

- Seleciona a primeira ocorrência do seletor

Selecionando elementos na DOM

Exemplo

<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <a href="">My link</a>
    <h1 id="mainHeader" class="headers>Header</h1>
    <h2 class="headers"> Header2 </h2>
  </body>
</html>

const mainHeader = document.querySelector("#head")

const allHeaders = document.querySelector(".headers")

const myLinks = document.querySelector("a'")

Podemos armazenar elementos HTML!!!!

Selecionando elementos na DOM

document.querySelectorAll()

- Retorna todos elementos com o seletor

- Nodelist 

- Possui funções de lista (forEach, map...)

Selecionando elementos na DOM

<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <a href="">My link</a>
    <h1 id="mainHeader" class="headers>Header</h1>
    <h2 class="headers"> Header2 </h2>
  </body>
</html>

const headers = document.querySelectorAll('.headers')

headers.forEach(h => console.log(h))

Modificando elementos na DOM

innerHTML

- Propriedade de elementos HTML

- Descreve o conteúdo de uma tag

<html>
  <head>
    <title>My title</title>
  </head>
  <body>
    <a href="">My link</a>
    <h1>Header</h1>
  </body>
</html>

const linkTag = document.querySelector('a')

 <a href="">My link</a>
console.log(linkContent) //My link

Modificando elementos na DOM

const linkContent = linkTag.innerHTML

Na prática

classList

Modificando elementos na DOM

Usado para alterar as classes dos elementos

classList.add()

classList.remove()

classList.toggle()

Na prática

Tarefa

Adicione um botão de modo noturno na sua página

<script src="myscripts.js"></script>

Para linkar o javascript e seu html, lembre de adicionar essa tag ao seu head

Avisos

03 e 04/06 no IME

WebDev

Obrigado pela presença :)

Made with Slides.com