WebDev

JavaScript

Aula 3

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/

Revisão

css

https://codepen.io/Mota02/pen/QWywXQb?editors=1100

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

let x = 25;
const y = 30;

(ou apenas valores)

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

O que é === ???

Comparação de tipo e de valor

0 == 0 // true
0 == false // true
"" == false // true

0 === 0 // true

// Mas...

0 === false // false
"" === false // false

// Pois

// typeof 0 === 'number'
// typeof "" === 'string'
// typeof false === 'boolean'

O == tem algumas regrinhas escondidas

Cuidado com || e &&

let a = 0 && 4; // valor booleano falso => a = 0;
let a = 4 && 2; // valor booleano verdadeiro => a = 2;

// São iguais:

let a = 4 && 0; // a = 0;
if(4 && 0) {
  a = 0;
}
else {
  a = 4;
}

AND (&&)

Valida para o primeiro valor quando (a expressão inteira) é falsa e para o segundo quando é verdadeira

Cuidado com || e &&

let a = 3 || 4; // a = 3;
let a = 0 || 4; // a = 4;

// São a mesma coisa:

a = false || 4;

if(false) {
  a = false;
}
else {
  a = 4;
}

OR (||)

Valida para o primeiro valor quando  (o primeiro) é verdadeiro e para o segundo quando (o primeiro) é falso.

Operadores mais simples

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

>, >=, <, <= funcionam como o esperado:

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?

Input e output

Como estamos utilizando o JS de navegador, para input, podemos utilizar o prompt:

Para output, o alert:

let resposta = prompt("Insira a sua resposta");
let x = 4;
alert("O valor de x é " + x);
let x = 3;
console.log("O valor de x é " + x);

Ou também o console.log

Juntando as coisas

const queroAprender = prompt("Você quer aprender? (S ou N)")
if (queroAprender == "S"){
	const tempoLivre = prompt("Qual seu tempo livre em horas?")
  if (tempoLivre > 10) {
      alert("Vou virar expert em JS!")
  }
  else {
      if (tempoLivre > 0 && tempoLivre <= 10) {
	       alert("Vou aprender um bocado de JS!")
      }
      else {
          alert("Não vou aprender nada :(")
      }
  }
}
else{
  alert("Continue burro então! :|")
}

Funções

São "subprogramas" que podem ser executados por código externo

Cidadãs de 1ª classe

Podem receber parâmetros de entrada e produzir uma saída

Funções

São "subprogramas" que podem ser executados por código externo

function alertarUsuário() {
    alert('Cuidado 👀')
} // Define um código

alertarUsuário() /* Esse pode ser chamado para que o código
		seja executado quando e quantas vezes quiser */

function nomeDaFunção() {

    ... código da função

}

Definição:
Chamada/execução:

nomeDaFunção()

Funções

Podem receber parâmetros de entrada e produzir uma saída

function soma(x, y) {
    return x + y;
}

const resultado = alertarUsuário(2, 6); // 8

Funções

Cidadãs de 1ª classe

function soma(x, y) {
    return x + y;
}

const soma1 = (a) => soma(1, a);

const resultado = soma1(2); // 3

Funções podem ser guardadas dentro de variáveis

Funções

Cidadãs de 1ª classe

function soma(x, y) {
    return x + y;
}

function multiplica(x, y) {
    return x * y;
}

function calcula(x, y, operacao) {
    return operacao(x, y);
}

const resultadoSoma = calcula(3, 4, soma) // 7
const resultadoMult = calcula(3, 4, nultiplica) // 12

Mas para que isso é útil?

Tarefa

Dado o repositório https://github.com/jppaulo06/tarefa-3-webdev, montar as seguintes funções no arquivo edit.js:

 

  • add(first, second)  /* adição de dois números */
  • sub(first, second) /* subtração de dois números */
  • mul(first, second) /* multiplicação de dois números */
  • div(first, second) /* divisão de dois números */
  • is_even(number) /* verificação de que um número é par */

WebDev

Obrigado pela presença :)

WebDev 2023 - Aula 3 - Introdução a JavaScript

By codelab@ime.usp.br

Made with Slides.com

WebDev 2023 - Aula 3 - Introdução a JavaScript

  • 188

More from codelab@ime.usp.br