WebDev

JavaScript

Aula 6

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

Dar vida às páginas web

Formalmente, ECMAScript

Roda no navegador e fora dele

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"

Tipos Básicos

Operadores Algébricos

1 + 4          // 5

3.1 - 4.1      // -1 (-0.999999999998)

0.3333333333333333 * 3 // 1

10 / 4         // 2.5

17 % 10        // 7

2 ** 10        // 1024

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

Operadores Lógicos

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)

"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.

Variáveis (e constantes)

// essa forma é permitida
let nome = "João";
let idade = 27;

// ... várias coisas ...

console.log(`Ele é ${nome} e tem ${idade} anos`);
// Ele é João e tem 27 anos


// essa também
let nome  = "João",
    idade = 27;

const pi = 3.14,
      natal = "25 de dezembro";

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);
// true

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

Desvios condicionais

const r = Math.random();
const dado = 1 + Math.floor(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: 1 + piso(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 linkContent = document.querySelector('a').innerHTML

const bodyContent = document.querySelector('body')

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

Modificando elementos na DOM

classList

Modificando elementos na DOM

Usado para alterar as classes dos elementos

classList.add()

classList.remove()

classList.toggle()

Code Along!

https://codepen.io/uspcodelab/pen/BaWboKQ?editors=0010

Tarefa

Faça uma página que faça o mesmo que o gif ao lado

Entrega no Google Classroom

WebDev

Obrigado pela presença :)

Made with Slides.com