Atribuindo e Acessando valores de Variáveis: = e document.write()

Neste tutorial vamos te ensinar como atribuir valores para variáveis. Ou seja, vamos aprender como uma variável armazena, de fato, informações e como acessar esses dados.

Tutoriais anteriores:
Como declarar uma variável
Tipos de dados


Atribuição em JavaScript: = 

Agora que já aprendemos quais os tipos de informações que podemos trabalhar em JavaScript (números, strings, booleanos, null, objetos e informações) bem como declarar uma variável, vamos aprender como atribuir um valor a uma variável.

Ou seja, vamos fazer uma variável que criamos armazenar determinada informação.
Isso é bem simples, é feito com o símbolo de atribuição de igual: =

Vamos criar uma variável chamada idade e fazer ela receber um valor (por exemplo, 18):
var idade;
idade = 18;

E prontinho, só isso.
Tem um bloco de memória reservado, e você pode acessar através da variável idade e lá dentro armazenamos um número, o 18.

Isso também pode ser feito assim:
var idade = 18 ;

Ou seja, declaramos, criamos a variável e já atribuímos um valor para ela!

Veja agora como atribuir uma string (texto) a uma variável que vamos chamar de nome:
var nome = "Olá, Mundo!"

Pronto. Reservou um bloco de memória, chamou de nome e dentro dele agora tem reservado o valor "Olá, Mundo!", uma string.

Acessando Variáveis

Agora que aprendemos a declarar e atribuir o valor a uma variável, vamos dar um exemplo de como acessar elas, ver o que está armazenado naquela variável.

Primeiro, vamos declarar a variável idade e atribuir o valor 18.
Em seguida, vamos 'imprimir', escrever na tela o valor dessa variável, usando o método document.write()

Para isso, basta fazer:
document.write(idade)

Veja o código:


<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var idade = 18;
    document.write(idade);  
   </script>
   
 </head>
</html>

Agora abra seu site .html e veja o resultado:
18

Colocamos pra imprimir a variável idade e apareceu o número 18, que é o valor que está armazenado dentro dela.

"Olá mundo" usando variável

Agora, vamos declarar uma variável chamada curso e atribuir a ela a seguinte string:
"Olá, mundo!"

Vamos imprimir o valor armazenado nessa variável, usando o método document.write() do JavaScript:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var nome = "Olá, mundo!";
    document.write(nome); 
   </script>

 </head>
</html>

Veja que o resultado foi simplesmente exibir a frase "Olá, mundo" na tela.

O Método document.write() - Exibindo coisas no documento

O método write() serve para você escrever informações no documento.
Ele é bem simples de usar, basta colocar dentro dos parêntesis o que deseja que apareça no documento (no caso, a página HTML).

Por exemplo, para exibir uma string:
document.write("JavaScript Progressivo");

Para exibir o valor de uma variável de nome teste:
document.write(teste)

É possível escrever no documento várias coisas usando este método, basta separar o que deseja exibir por vírgula:
document.write("Olá", "mundo")

Note que agora ele vai exibir duas strings:
"Olá"
"mundo"

Pois separamos por vírgula. Pode exibir também um número e uma string:
document.write("Olá mundo", 18)

O resultado: Olá mundo18
Sim, fica tudo 'grudado'.

Vamos definir duas variáveis, uma com seu nome e outra com sua idade.
Depois vamos escrever no documento a string:
"Meu nome é [nome] e tenho [idade] anos"

Nosso código fica assim:

<!DOCTYPE html>
<html>
 <head>
   <title>Curso JavaScript Progressivo</title>

   <script type="text/javascript">
    var nome="Francisco";
    var idade=18;

    document.write("Meu nome é ", nome," e tenho ", idade, " anos");
   </script>

 </head>
</html>

Exercício de JavaScript

Crie um site em HTML, e usando JavaScript que use duas variáveis, a nome com o nome de uma pessoa e a variável sobrenome com o sobrenome dela.

Em seguida, a página deve exibir a seguinte string:
"Bem vindo ao sistema [sobrenome], [nome]"

Digite seu código nos campos de comentários.

Nenhum comentário:

Postar um comentário