Programação Front End

Conectando HTML e JavaScript: Integração Interna e Externa

Nesta aula, vamos te mostrar como abrir o Visual Studio Code pela primeira vez e criar uma pasta no Windows para começar a trabalhar em seus primeiros projetos HTML e JavaScript. Você ficará surpreso com a facilidade do Visual Studio Code, pois assim que você inicia o código HTML, ele automaticamente gera a estrutura inicial, economizando seu tempo e esforço. Vamos começar a programar juntos e criar seu primeiro programa com este ambiente amigável e poderoso.

Agora você irá mergulhar no fascinante mundo do JavaScript e aprenderá duas formas fundamentais de incorporá-lo em suas páginas web. Primeiro, você descobrirá como incorporar o JavaScript diretamente no HTML, onde você pode adicionar código JavaScript entre as tags <script> no próprio documento HTML. Isso é útil para scripts pequenos e específicos que se aplicam apenas a uma página.

Em seguida, exploraremos a abordagem mais organizada e escalável, que é utilizar arquivos externos de JavaScript com a extensão .js. Vamos criar, vincular e importar esses arquivos externos em nossas páginas HTML. Isso facilita a manutenção, o compartilhamento e a reutilização de código JavaScript em várias páginas do seu site. Ao final desta aula, você terá uma compreensão sólida de como e quando usar cada abordagem, capacitando você a criar páginas web interativas e dinâmicas de forma eficiente e estruturada

Agora que você dominou esse conceito fundamental do JavaScript, é hora de enfrentar um desafio por conta própria. Acredite, essa é a maneira mais eficaz de aprender e consolidar o conhecimento em sua mente.

Aqui está um código JavaScript simples que realiza a soma de duas variáveis valorA e valorB e exibe o resultado em um alerta, explicado linha por linha:



// Declaramos duas variáveis e atribuímos valores a elas
var valorA = 10;
var valorB = 5;

// Realizamos a soma das duas variáveis e armazenamos o resultado em uma terceira variável chamada 'resultado'
var resultado = valorA + valorB;

// Exibimos um alerta com o resultado da soma
alert("A soma de " + valorA + " e " + valorB + " é igual a " + resultado);


Explicação linha por linha:

  1. var valorA = 10;: Declaramos uma variável chamada valorA e atribuímos o valor 10 a ela.
  2. var valorB = 5;: Declaramos uma variável chamada valorB e atribuímos o valor 5 a ela.
  3. var resultado = valorA + valorB;: Criamos uma variável chamada resultado e calculamos a soma das variáveis valorA e valorB, armazenando o resultado nela.
  4. alert("A soma de " + valorA + " e " + valorB + " é igual a " + resultado);: Usamos a função alert para exibir uma caixa de diálogo com o resultado da soma, que é construído a partir das variáveis valorA, valorB e resultado.

Ao executar este código, você verá um alerta com a mensagem “A soma de 10 e 5 é igual a 15”. O resultado da soma será exibido na mensagem do alerta.

Lembrando que, ao executar seu JavaScript dentro de um arquivo HTML, você precisa envolvê-lo nas tags.

<script>

    // SEU CÓDIGO AQUI

</script>

Essas tags indicam ao navegador que o código contido entre elas é JavaScript e deve ser interpretado como tal.”

Desafio cálculo de juros simples:

DICA: Antes de começar a escrever seu código em JavaScript, considere fazer o cálculo no Excel. Isso pode ser útil para melhorar o seu entendimento do conceito.”

Ela é usada para calcular o valor dos juros gerados por uma quantia de dinheiro (capital) em um período de tempo, a uma taxa de juros específica. Aqui está a explicação dos elementos da fórmula:

  • Juros: É o valor dos juros que você está calculando.
  • Capital: É a quantia de dinheiro inicial ou o principal.
  • TaxadeJuros: Representa a taxa de juros por unidade de tempo (normalmente, por ano).
  • Tempo: É o período de tempo em que o dinheiro é emprestado ou investido, geralmente expresso em anos.

A fórmula completa é:

Juros= Capital * TaxadeJuros * Tempo;

Para calcular os juros simples, você multiplica o Capital pela taxa de Juros e pelo Tempo. O resultado (Juros) será o valor dos juros a serem pagos ou ganhos.

Por exemplo, se você tiver um capital de R$ 1.000, uma taxa de juros de 5% ao ano e o dinheiro for investido por 3 anos, você pode calcular os juros simples da seguinte forma:

J=1.000⋅0,05⋅3=150J=1.000⋅0,05⋅3=150

Dica para o desafio:

    // Declaramos as variáveis
    var capital = 1000; // Capital inicial em reais
    var taxaDeJuros = 0.05; // Taxa de juros de 5% (0.05 como decimal)
    var tempo = 3; // Período de tempo em anos

Os juros simples nesse caso seriam R$ 150. Portanto, após 3 anos, você teria um total de R$ 1.150.

Agora é hora de construir o código para calcular juros simples. Desejo a você boa sorte nesta tarefa!