03 – Javascript – Operações Básicas e Precedência de Operadores

More videos
Views
   

Aula 03 – Javascript – Operações Básicas e Precedência de Operadores

Operações Básicas no Javascript

Operações Básicas no Javascript

Operadores

Os operadores a gente já conhece da matemática, mais, menos, multiplicão, divisão, etc. Mas, além desses, temos outros operadores também.

Operadores são como funções escritas de maneira especial no Javascript.

Tá confuso?

Não se preocupe, o aprendizado de qualquer linguagem de programação e os conceitos que as envolvem, não é linear, a prática é o que consolida o conhecimento.

Então, mãos a obra.

Crie uma outra pasta chamada exemplo03: Javascript_codes/exemplo03 com o conteúdo abaixo no index03.html:


<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <title>Aula 3: Fundamentos da Linguagem JavaScript - código fluente</title>
    </head>

    <body>
        <h1>Aula 3: Fundamentos da Linguagem JavaScript - código fluente - Operações Básicas</h1>
    </body>
    <script src="script03.js"></script>
</html>

Crie também o script03.js com o código abaixo.


/********************************
* Operações Básicas e Precedência de Operadores
*/

//Declaração das variáveis
var ano_atual, ano_ana, ano_maria, idade_ana, idade_maria

//Atribuição dos valores das variáveis
idade_ana = 17
idade_maria = 31
ano_atual = 2019
ano_ana = ano_atual - idade_ana
ano_maria = ano_atual - idade_maria

//Operadores matemáticos
console.log("Ana nasceu em " + ano_ana )
console.log("Maria nasceu em " + ano_maria)

//O javascript interpreta nasc_ana e nasc_maria como string, e concatena ("1731")
console.log("A soma das idades de Ana e Maria é: " + idade_ana + idade_maria + " anos.")

//Os parênteses circundando nasc_ana + nasc_maria forçam o Javascript primeiro 
//a fazer o cálculo da soma, só depois concatenar na string.
console.log("A soma das idades de Ana e Maria é: " + (idade_ana + idade_maria) + " anos.")

//Veja que no caso da multiplicação, não houve necessidade dos parênteses, por causa da 
//precedência do operador da multiplicação
console.log("A multiplicação das idades de Ana e Maria é: " + idade_ana * idade_maria + " anos.")

//Veja que no caso da divisão, também não houve necessidade dos parênteses, por causa da 
//precedência do operador da divisão
console.log("A divisão entre as idades de Maria e Ana é: " + idade_maria / idade_ana)

//Resto da divisão
console.log("O resto da divisão entre as idades de Maria e Ana é: " + idade_maria % idade_ana)

//Divisão inteira
console.log("A divisão inteira entre as idades de Maria e Ana é: " + parseInt(idade_maria / idade_ana))

//Outra forma de divisão inteira
console.log("Essa é outra forma para divisão inteira (idade_maria / idade_ana)|0: " + ((idade_maria / idade_ana)|0))

//--------------------
//Operadores lógicos

//Ana é mais velha do que Maria?
console.log("Ana é mais velha do que Maria: " + (idade_ana > idade_maria))

//-------------------- 
//Operador Typeof 
var logic = false 
var str = "Uma string qualquer." 
console.log("A variável logic é do tipo " + typeof(logic)) 
console.log("A variável idade_ana é do tipo " + typeof(idade_ana)) 
console.log("A variável str é do tipo " + typeof(str)) 

var a 
console.log("A variável a é do tipo " + typeof(a)) 

//---------------------- 
//Precedência de operadores 
var maior_idade = 18

//Multiplos operadores
ana_eh_maior_idade = ano_atual - ano_ana >= maior_idade //false

//Veja que funcionou, por causa da precedência do menos em relação ao maior igual.
console.log("Ana é maior de idade? " + ana_eh_maior_idade)

//Média da idade de Ana e Maria. Veja que o resultado não será correto
//por causa da precedência do / em releção ao +
var media = idade_maria + idade_ana / 2
console.log("Por causa da precedência do / o resultado ficou errado: " + media)

//Agrupando operadores

//Os parênteses forçam a fazer primeiro a soma, só depois a divisão
media = (idade_maria + idade_ana) / 2
console.log("Agora a média está correta: " + media)

//Multipas atribuições
var x = y = (2 + 3) * 4 - 6 // 5 * 4 - 6 // 20 - 6 // 14
console.log(x, y)


//Mais operadores
x *= 2 // é a mesma coisa que x = x * 2
console.log("O dobro de x é: " + x )

x += 10 // é a mesma coisa que x = x + 10
console.log("O dobro de x somados a 10 é: " + x )

//Operador de incremento
x++ //é a mesma coisa que x = x + 1, ou x += 1.
console.log("x foi incrementado em uma unidade: " + x )

//Operador de decremento
y-- //é a mesma coisa que y = y - 1, ou y -= 1.
console.log("y foi decrementado em uma unidade: " + y )

O código acima tem todas as explicações nos comentários, e no vídeo também.

De qualquer forma, quero comentar um pouco mais sobre tudo que foi feito no script02.js.

Antes, dêem uma olhada nesse link a tabela de precedência de operadores em Javascript:

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

Veja que o operador de atribuição de valor ( = ) tem a menor ou quase a menor precedência de todas.

Justamente porque a última coisa a se fazer é atribuir a uma variável o resultado de um cálculo, comparação, etc.

Queremos que essa etapa aconteça no último passo, então, depois de todos os operadores trabalharem para o resultado ( -, +, *, %, /, >, etc. ), por último queremos a atribuição do valor na variável.

Veja na tabela de precedência do link acima, que alguns operadores podem acontecer na direção esquerda para direita, por exemplo:

n = 2 + 5 + 9 + 10 // 7 + 9 + 10// 16 + 10 // 26

Outros da direita para esquerda:

var x = y = 26 //O y é o primeiro a receber o 26, só depois é que o x recebe o 26.

A direção que os operadores trabalham é chamado de associatividade.

Vejam o vídeo do post para maiores detalhes.

Com isso encerramos essa aula, na próxima vamos continuar vendo operadores lógicos, agora o if / else que chegamos a usar no primeiro script, onde a gente imprimia se a pessoa era casada ou não.

Curta a página do Código Fluente no Facebook
https://www.facebook.com/Codigofluente-338485370069035/

Vou deixar meu link de referidos na digitalocean pra vocês.

Quem se cadastrar por esse link, ganha $100.00 dólares de crédito na digitalocean:

Digital Ocean

Esse outro link é da one.com:

One.com

Obrigado, até a próxima e bons estudos. 😉

 

About The Author
-

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>