Gostou do nosso conteúdo? Te ajudou?
Nos ajude também! Faça um PIX, de qualquer valor:
programacao.progressiva@gmail.com

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.

8 comentários:

  1. ! DOCTYPE html
    html
    head
    title curso script /title

    script type="text/javascript"
    var nome="cristiano";
    var sobrenome="barbosa";
    document.write("eu sou " ,nome ," ", sobrenome, " bem vindos ");
    /script
    /head
    /html

    ResponderExcluir
  2. retirei as tags pois nao estava permitindo nos comentarios

    ResponderExcluir
  3. var nome = "Diego";
    var sobrenome = "Schmitt";

    document.write("Bem vindo ao sistema ",nome," ", sobrenome);

    ResponderExcluir

  4. type="text/javascript">
    var nome="Henrique"
    var nascimento=1995
    var atual = 2020




    type="text/javascript">

    document.write("Meu nome é ",nome, " nasci no ano de ",nascimento," portanto tenho ", atual -nascimento, " anos de idade ")



    Tags não aceitas

    ResponderExcluir
  5. DOCTYPE html
    html lang="PT-BR"
    head
    title Curso de JavaScript Progressivo /title
    script type="text/javascript"
    var nome = "Maria"
    var sobrenome = "Reis"
    document.write("Bem vindo ao sistema ",sobrenome," ",nome,"!")
    /script
    /head
    /html

    ResponderExcluir
  6. !DOCTYPE html
    html
    head
    title Exercicio Curso JavaScript Progressivo /title

    script type="text/javascript"
    var nome = "Gabriel"
    var sobrenome =" Marques"

    document.write("Bem Vindo ao Sistema"," ", nome, " ", sobrenome)

    /script

    /head
    /html

    ResponderExcluir
  7. var nome, sobrenome;
    nome = prompt("Digite seu nome:");
    sobrenome = prompt("Digite seu sobrenome:");
    document.write("Olá, seja muito bem vindo / vinda ",nome," ",sobrenome,"!");

    ResponderExcluir
  8. !DOCTYPE html
    html lang="pt-BR"
    head
    meta charset="UTF-8"
    meta http-equiv="X-UA-Compatible" content="IE=edge"
    meta name="viewport" content="width=device-width, initial-scale=1.0"
    title Exercício Simples title
    script type="text/javascript"
    var nome = "Bruno ";
    var sobrenome = "Silva";
    document.write("Bem vindo ao sistema, Sr.",nome, sobrenome,", é um prazer telo conosco!");

    ResponderExcluir