Tutorial Completo de JavaScript
Traduzido por
ScribdTranslationsTutorial Completo de JavaScript
Traduzido por
ScribdTranslationsTutorial de JavaScript
❮ HomeNext ❯
JavaScript é a linguagem de programação mais popular do mundo.
JavaScript é a linguagem de programação da Web.
JavaScript é fácil de aprender.
Este tutorial irá te ensinar JavaScript do básico ao avançado.
Comece a aprender JavaScript agora »
Exemplos em Cada Capítulo
Com o nosso editor 'Tente você mesmo', você pode editar o código-fonte e visualizar o
result.
Exemplo
Meu Primeiro JavaScript
Clique em mim para exibir Data e Hora
Experimente você mesmo »
<!DOCTYPE html>
<html>
<body>
<h2>Meu Primeiro JavaScript</h2>
<botão tipo="botão">
onclick="[Link]('demo').innerHTML = Date()"
Clique em mim para mostrar a data e hora.
<p id="demo"></p>
</body>
</html>
Use o Menu
Recomendamos a leitura deste tutorial, na sequência listada no menu.
Se você tiver uma tela grande, o menu estará sempre presente à esquerda.
Se você tiver uma tela pequena, abra o menu clicando no sinal do menu superior ☰.
Aprenda por Exemplos
Exemplos são melhores do que 1000 palavras. Exemplos são frequentemente mais fáceis de
entender do que as explicações do texto.
Este tutorial complementa todas as explicações com o esclarecimento "Experimente você mesmo"
exemplos.
If you try all the examples, you will learn a lot about JavaScript, in a very
pouco tempo!
Exemplos de JavaScript »
Por que estudar JavaScript?
JavaScript é uma das 3 linguagens que todos os desenvolvedores web devem aprender:
[Link] para definir o conteúdo das páginas da web
[Link] para especificar o layout de páginas da web
[Link] program the behavior of web pages
This tutorial covers every version of JavaScript:
O JavaScript Original ES1 ES2 ES3 (1997-1999)
A Primeira Revisão Principal ES5 (2009)
A Segunda Revisão ES6 (2015)
Todos os Acréscimos Anuais (2016, 2017, 2018, 2019, 2020)
ANÚNCIO
Velocidade de Aprendizagem
Neste tutorial, a velocidade de aprendizado é sua escolha.
Tudo depende de você.
Se você está tendo dificuldades, faça uma pausa ou releia o material.
Sempre tenha certeza de que você entende todos os exemplos de 'Experimente você mesmo'.
A única maneira de se tornar um programador inteligente é: Praticar. Praticar.
Pratique. Código. Código. Código!
Teste-se com exercícios
Exercício:
Crie uma variável chamadacarName e atribua o valorVolvopara isso.
var = " ";
Perguntas Comuns
Como eu consigo JavaScript?
Onde posso baixar JavaScript?
JavaScript é gratuito?
Você não precisa obter ou baixar JavaScript.
JavaScript já está em execução no seu navegador no seu computador, no seu tablet, e em
seu smartphone.
JavaScript é livre para uso de todos.
Meu Aprendizado
Acompanhe seu progresso com o programa gratuito "Meu Aprendizado" aqui no W3Schools.
Log in to your account, and start earning points!
Este é um recurso opcional. Você pode estudar W3Schools sem usar Meu Aprendizado.
Referências JavaScript
W3Schools mantém uma referência completa de JavaScript, incluindo todos os objetos HTML e do navegador.
A referência contém exemplos para todas as propriedades, métodos e eventos, e é continuamente
atualizado de acordo com os últimos padrões da web.
Referência Completa de JavaScript »
Teste de Quiz de JavaScript
Teste suas habilidades em JavaScript no W3Schools!
Comece o Quiz de JavaScript!
Dê um impulso à sua carreira
Obtenha a certificação por
completando o curso de JavaScript
Obtenha certificado w3schools CERTIFIE
Introdução ao JavaScript
❮ AnteriorPróximo❯
Esta página contém alguns exemplos do que o JavaScript pode fazer.
JavaScript Pode Mudar o Conteúdo HTML
Um dos muitos métodos HTML do JavaScript é getElementById().
O exemplo abaixo "encontra" um elemento HTML (com id="demo") e altera o elemento
content (innerHTML) to "Hello JavaScript":
Exemplo
[Link]("demo").innerHTML ="Olá JavaScript";
Experimente você mesmo »
<!DOCTYPE html>
<html>
<body>
<h2>O Que o JavaScript Pode Fazer?</h2>
<p id="demo">JavaScript pode mudar o conteúdo HTML.</p>
<button type="button" onclick='[Link]("demo").innerHTML = "Olá "
JavaScript!"'>Clique em mim!</button>
</body>
</html>
JavaScript aceita tanto aspas duplas quanto aspas simples:
Exemplo
[Link]('demo').innerHTML ='Olá JavaScript';
Tente você mesmo »
<!DOCTYPE html>
<html>
<body>
<h2>O Que o JavaScript Pode Fazer?</h2>
<p id="demo">JavaScript pode mudar o conteúdo HTML.</p>
<button type="button" onclick="[Link]('demo').innerHTML = 'Olá '
JavaScript!'">Clique em mim!</button>
</corpo>
</html>
JavaScript Pode Mudar Atributo HTML
Valores
Neste exemplo, o JavaScript altera o valor do atributo thesrc(source) de uma tag <img>:
A Lâmpada
<!DOCTYPE html>
<html>
<body>
<h2>O Que o JavaScript Pode Fazer?</h2>
<p>JavaScript pode alterar os valores dos atributos HTML.</p>
<p>Neste caso, o JavaScript altera o valor do atributo src (origem) de um </p>
imagem.</p>
<button onclick="[Link]('myImage').src='pic_bulbon.gif'">Turn
na luz</button>
<img id="myImage" src="pic_bulboff.gif" style="width:100px">
<button onclick="[Link]('myImage').src='pic_bulboff.gif'">Ligar
apagar a luz</button>
</corpo>
</html>
JavaScript pode mudar estilos HTML (CSS)
Mudar o estilo de um elemento HTML é uma variante de mudar um HTML
attribute:
Exemplo
[Link]("demo").[Link] ="35px";
Tente você mesmo »
<!DOCTYPE html>
<html>
<body>
<h2>O Que o JavaScript Pode Fazer?</h2>
<p id="demo">JavaScript pode mudar o estilo de um elemento HTML.</p>
<button type="button">
onclick="[Link]('demo').[Link]='35px'">Click Me!</button>
</body>
</html>
JavaScript Pode Ocultar Elementos HTML
Esconder elementos HTML pode ser feito alterando oexibirstyle:
Exemplo
[Link]("demo").[Link] ="none";
Experimente você mesmo »
<!DOCTYPE html>
<html>
<corpo>
<h2>O que o JavaScript pode fazer?</h2>
<p id="demo">JavaScript pode ocultar elementos HTML.</p>
<button type="button">
onclick="[Link]('demo').[Link]='none'"><button>Clique em Mim!</button>
</body>
</html>
JavaScript Pode Mostrar Elementos HTML
Mostrar elementos HTML ocultos também pode ser feito mudando
oexibirstyle:
Exemplo
[Link]("demo").[Link] ="block";
Experimente você mesmo »
<!DOCTYPE html>
<html>
<body>
<h2>O Que o JavaScript Pode Fazer?</h2>
<p>JavaScript pode mostrar elementos HTML ocultos.</p>
<p id="demo" style="display:none">Olá JavaScript!</p>
<button type="button">
onclick="[Link]('demo').[Link]='block'">Clique em Mim!
</botão>
</body>
</html>
Você sabia?
JavaScript andJavaare completely different languages, both in concept and
design.
JavaScript foi inventado por Brendan Eich em 1995 e se tornou um ECMA
padrão em 1997.
ECMA-262 é o nome oficial do padrão. ECMAScript é o oficial
nome da língua.
Versões do JavaScript »
JavaScript Onde Ir
❮ AnteriorPróximo❯
A Tag <script>
Em HTML, o código JavaScript é inserido entre<script>e</script> etiquetas.
Exemplo
<script>
[Link]("demo").innerHTML ="Meu Primeiro JavaScript";
</script>
Experimente você mesmo »
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript no Corpo</h2>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
Exemplos antigos de JavaScript podem usar um atributo de tipo: <script
tipo="text/javascript">.
O atributo tipo não é obrigatório. JavaScript é a linguagem de script padrão.
em HTML.
Funções e Eventos em JavaScript
Um JavaScriptfunçãoé um bloco de código JavaScript, que pode ser executado
quando 'chamado' para.
Por exemplo, uma função pode ser chamada quando um evento ocorre, como quando o
o usuário clica em um botão.
Você aprenderá muito mais sobre funções e eventos em capítulos posteriores.
JavaScript no <head> ou <body>
Você pode colocar qualquer número de scripts em um documento HTML.
Scripts podem ser colocados no<corpo>, ou no<cabeça>seção de uma página HTML
ou em ambos.
JavaScript no <head>
Neste exemplo, um JavaScriptfunçãoestá colocado na<cabeça>seção de um
Página HTML.
A função é invocada (chamada) quando um botão é clicado:
Exemplo
<!DOCTYPEhtml>
<html>
<head>
<script>
funçãomyFunction() {
[Link]("demo").innerHTML ="Paragraph changed.";
}
</script>
</head>
<body>
<h2>Exemplo de JavaScript no Cabeçalho</h2>
Um Parágrafo
<buttontype="button"onclick="myFunction()">Try it</button>
</body>
</html>
Experimente você mesmo »
ANÚNCIO
JavaScript in <body>
Neste exemplo, um JavaScriptfunçãoestá colocado em<corpo>seção de um
Página HTML.
A função é invocada (chamada) quando um botão é clicado:
Exemplo
<!DOCTYPEhtml>
<html>
<corpo>
<h2>Exemplo de JavaScript no Corpo</h2>
<pid="demo">Um Parágrafo</p>
<buttontype="button"onclick="myFunction()">Experimente</button>
<script>
função minhaFunção() {
[Link]("demo").innerHTML ="Parágrafo alterado.";
}
</script>
</body>
</html>
Experimente você mesmo »
Colocar scripts no final do elemento <body> melhora a exibição
velocidade, porque a interpretação de script desacelera a exibição.
JavaScript Externo
Os scripts também podem ser colocados em arquivos externos:
External file: [Link]
função minhaFunção() {
[Link]("demo").innerHTML ="Parágrafo alterado.";
}
Scripts externos são práticos quando o mesmo código é usado em muitos diferentes
web pages.
Os arquivos JavaScript têm a extensão de arquivo .js.
Para usar um script externo, coloque o nome do arquivo do script noorigem(fonte)
atributo de um(a)<script>tag:
Exemplo
<script src="[Link]"></script>
Experimente você mesmo »
Você pode colocar uma referência de script externo em<cabeça>ou<body>como você quiser.
O script se comportará como se estivesse localizado exatamente onde o<script>tag é
localizado.
Scripts externos não podem conter<script>etiquetas.
Vantagens do JavaScript Externo
Colocar scripts em arquivos externos tem algumas vantagens:
Ele separa HTML e código
Isso torna o HTML e o JavaScript mais fáceis de ler e manter
Arquivos JavaScript em cache podem acelerar o carregamento das páginas
Para adicionar vários arquivos de script a uma página - use várias tags de script:
Exemplo
<scriptsrc="[Link]"></script>
<scriptsrc="[Link]"></script>
Referências Externas
Um script externo pode ser referenciado de 3 maneiras diferentes:
Com um URL completo (um endereço da web completo)
Com um caminho de arquivo (como /js/)
Sem nenhum caminho
Este exemplo usa uma URL completa para vincular a [Link]:
Exemplo
<scriptsrc="[Link]
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Externo</h2>
<p id="demo">Um Parágrafo.</p>
<button type="button" onclick="myFunction()">Clique em Mim</button>
<p>Este exemplo usa uma URL completa da web para vincular a "[Link]".</p>
<p>(myFunction está armazenada em "[Link]")</p>
<script src="[Link]
</body>
</html>
Experimente você mesmo »
Este exemplo usa um arquivo pathto link para [Link]:
Exemplo
<script src="/js/[Link]"></script>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Externo</h2>
<p id="demo">Um Parágrafo.</p>
<button type="button" onclick="myFunction()">Experimente</button>
<p>Este exemplo usa um caminho de arquivo para vincular ao "[Link]".</p>
<p>(myFunction está armazenada em "[Link]")</p>
<script src="/js/[Link]"></script>
</corpo>
</html>
Tente você mesmo »
Este exemplo não usa caminho para vincular ao [Link]:
Exemplo
<scriptsrc="[Link]"></script>
<!DOCTYPE html>
<html>
<body>
<h2>Demonstrativo de JavaScript Externo</h2>
<p id="demo">A Paragraph.</p>
<button type="button" onclick="myFunction()">Experimente</button>
<p>Este exemplo se liga a "[Link]".</p>
<p>(myFunction is stored in "[Link]")</p>
<script src="[Link]"></script>
</body>
</html>
Experimente você mesmo »
Você pode ler mais sobre caminhos de arquivos no capítulo Caminhos de Arquivos HTML.
Saída JavaScript
❮ AnteriorPróximo❯
Possibilidades de Exibição em JavaScript
JavaScript pode "exibir" dados de diferentes maneiras:
Escrevendo em um elemento HTML, usandoinnerHTML.
Escrevendo na saída HTML [Link]().
Escrevendo em uma caixa de alerta, [Link]().
Escrevendo no console do navegador, [Link]().
Usando innerHTML
Para acessar um elemento HTML, o JavaScript pode usar
[Link](id)método.
Oid o atributo define o elemento [Link] define
o conteúdo HTML:
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<h1>Minha Primeira Página da Web</h1>
<p>Meu Primeiro Parágrafo</p>
<pid="demo"></p>
<script>
[Link]("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
Experimente você mesmo »
Changing the innerHTML property of an HTML element is a common way to
exibir dados em HTML.
Usando [Link]()
Para fins de teste, é conveniente [Link]():
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<h1>Minha Primeira Página da Web</h1>
<p>Meu primeiro parágrafo.</p>
<script>
[Link](5+6);
</script>
</body>
</html>
Experimente você mesmo »
Usar [Link]() após um documento HTML ser carregado, irá deletar tudo
existing HTML:
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<h1>Minha Primeira Página da Web</h1>
<p>Meu primeiro parágrafo.</p>
<botão tipo="botão" onclick="[Link](5 + 6)">Experimente</botão>
</body>
</html>
Experimente você mesmo »
O método [Link]() deve ser usado apenas para testes.
ANÚNCIO
Using [Link]()
Você pode usar uma caixa de alerta para exibir dados:
Exemplo
<!DOCTYPEhtml>
<html>
<corpo>
<h1>Minha Primeira Página da Web</h1>
<p>Meu primeiro parágrafo.</p>
<script>
[Link](5+6);
</script>
</body>
</html>
Experimente você mesmo »
Você pode pular ojanelapalavra-chave.
No JavaScript, o objeto window é o objeto de escopo global. Isso significa que
variáveis, propriedades e métodos pertencem por padrão ao objeto window.
Isso também significa que especificar ojanelaa palavra-chave é opcional:
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<h1>Minha Primeira Página da Web</h1>
<p>Meu primeiro parágrafo.</p>
<script>
alert(5+6);
</script>
</corpo>
</html>
Experimente você mesmo »
Usando [Link]()
Para fins de depuração, você pode chamar [Link]()método no
navegador para exibir dados.
You will learn more about debugging in a later chapter.
Exemplo
<!DOCTYPEhtml>
<html>
<corpo>
<script>
[Link](5+6);
</script>
</body>
</html>
Experimente você mesmo »
Imprimir JavaScript
JavaScript não possui nenhum objeto de impressão ou métodos de impressão.
Você não pode acessar dispositivos de saída a partir do JavaScript.
A única exceção é que você pode chamar [Link]()método na
navegador para imprimir o conteúdo da janela atual.
Exemplo
<!DOCTYPEhtml>
<html>
<body>
<button onclick="[Link]()">Imprimir esta página</button>
</body>
</html>
Instruções JavaScript
❮ AnteriorPróximo❯
Exemplo
letx, y, z; // Statement 1
x = 5; // Declaração 2
y = 6; // Declaração 3
z = x + y; // Declaração 4
Experimente você mesmo »
Programas em JavaScript
Um programa de computador é uma lista de "instruções" a serem "executadas" por um
computador.
Em uma linguagem de programação, estas instruções de programação são
declarações chamativas.
Um programa JavaScript é uma lista de declarações de programação.
No HTML, programas JavaScript são executados pelo navegador da web.
Instruções JavaScript
As instruções JavaScript são compostas por:
Valores, Operadores, Expressões, Palavras-chave e Comentários.
Esta declaração diz ao navegador para escrever "Olá Dolly." dentro de um HTML
elemento com id="demo":
Exemplo
[Link]("demo").innerHTML ="Hello Dolly.";
Tente você mesmo »
A maioria dos programas JavaScript contém muitas instruções JavaScript.
As declarações são executadas, uma por uma, na mesma ordem em que estão
written.
Programas JavaScript (e instruções JavaScript) são frequentemente chamados de JavaScript
código.
Pontos e vírgulas ;
Pontos e vírgulas separaram as instruções JavaScript.
Adicione um ponto e vírgula no final de cada instrução executável:
Exemplos
let a, b, c; // Declare 3 variables
a = 5; // Atribua o valor 5 a a
b = 6; // Atribua o valor 6 a b
c = a + b; // Atribua a soma de a e b a c
<!DOCTYPE html>
<html>
<corpo>
<h2>Declarações JavaScript</h2>
<p>As instruções JavaScript são separadas por ponto e vírgula.</p>
<p id="demo1"></p>
<script>
deixe a, b, c;
a = 5;
b = 6;
c = a + b;
[Link]("demo1").innerHTML = c;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Instruções JavaScript</h2>
Um <b>programa JavaScript</b> é uma lista de <b>instruções</b> a serem
executado por um computador.
<p id="demo"></p>
<script>
deixe x, y, z; // Declaração 1
x = 5; // Declaração 2
y = 6; // Declaração 3
z = x + y; // Declaração 4
[Link]("demo").innerHTML =
O valor de z é
</script>
</corpo>
</html>
Experimente você mesmo »
Quando separados por ponto e vírgula, múltiplas declarações em uma linha são permitidas:
a = 5; b = 6; c = a + b;
<!DOCTYPE html>
<html>
<corpo>
<h2>Instruções JavaScript</h2>
<p>No HTML, as instruções JavaScript são executadas pelo navegador.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "Hello Dolly.";
</script>
</body>
</html>
Experimente você mesmo »
Na web, você pode ver exemplos sem ponto e vírgula.
Terminar declarações com ponto e vírgula não é obrigatório, mas altamente recomendado.
ANÚNCIO
Espaço em Branco JavaScript
O JavaScript ignora espaços múltiplos. Você pode adicionar espaços em branco ao seu script para
tornar mais legível.
As linhas seguintes são equivalentes:
letperson ="Hege";
letperson="Hege";
Uma boa prática é colocar espaços em torno dos operadores ( = + - * / ):
letx = y + z;
Comprimento da Linha e Quebras de Linha em JavaScript
Para melhor legibilidade, os programadores costumam evitar linhas de código mais longas do que
80 caracteres.
Se uma instrução JavaScript não couber em uma linha, o melhor lugar para quebrá-la é
após um operador:
Exemplo
[Link]("demo").innerHTML =
Olá Dolly!
Experimente você mesmo »
Blocos de Código JavaScript
As instruções JavaScript podem ser agrupadas em blocos de código, dentro de chaves
chaves {...}.
O propósito dos blocos de código é definir declarações a serem executadas juntas.
Um lugar onde você encontrará declarações agrupadas em blocos é em
Funções JavaScript:
Exemplo
função minhaFunção() {
[Link]("demo1").innerHTML ="Hello Dolly!";
[Link]("demo2").innerHTML ="Como você está?";
}
Experimente você mesmo »
Neste tutorial, usamos 2 espaços de recuo para blocos de código.
Você aprenderá mais sobre funções mais tarde neste tutorial.
Palavras-chave do JavaScript
Instruções JavaScript geralmente começam com uma palavra-chave para identificar o JavaScript
ação a ser realizada.
Nossas Palavras Reservadas Referenciam todas as palavras-chave do JavaScript.
Aqui está uma lista de algumas das palavras-chave que você aprenderá neste tutorial:
Keyword Description
Var Declara uma variável
Deixe Declara uma variável de bloco
Const Declara uma constante de bloco
Se Marca um bloco de instruções a ser executado em uma condição
interruptor Marca um bloco de declarações a ser executado em diferentes casos
Para Marca um bloco de instruções a ser executado em um loop
função Declara uma função
retornar Sai de uma função
Tente Implementa o tratamento de erros em um bloco de instruções
As palavras-chave do JavaScript são palavras reservadas. Palavras reservadas não podem ser usadas como
nomes para variáveis.
❮ PreviousLog in to track progress Next❯
JavaScript Syntax
❮ AnteriorPróximo❯
JavaScript syntax is the set of rules, how JavaScript programs are
constructed:
// How to create variables:
varx;
lety;
// Como usar variáveis:
x = 5;
y = 6;
letz = x + y;
Valores do JavaScript
A sintaxe do JavaScript define dois tipos de valores:
Valores fixos
Valores das variáveis
Valores fixos são chamados de Literais.
Os valores das variáveis são chamados de Variáveis.
Literais JavaScript
As duas regras de sintaxe mais importantes para valores fixos são:
1.Números são escritos com ou sem casas decimais:
10,50
1001
Tente você mesmo »
[Link] cadeias de caracteres são textos, escritos entre aspas duplas ou simples:
João Doe
John Doe
Experimente você mesmo »
ADVERTISEMENT
Variáveis JavaScript
Em uma linguagem de programação, variáveis são usadas para armazenar valores de dados.
JavaScript utiliza as palavras-chavevar, deixeeconstdeclararvariáveis.
Um sinal de igual é usado para atribuir valores a variáveis.
Neste exemplo, x é definido como uma variável. Então, x é atribuído (dado) o
value 6:
deixe
x = 6;
Experimente você mesmo »
Operadores JavaScript
JavaScript usa operadores aritméticos (+ - * / ) tocomputevalues:
(5+6) *10
Experimente você mesmo »
JavaScript usa um operador de atribuição (= ) atribuir valores a
variables:
deixe x, y;
x = 5;
y = 6;
Tente você mesmo »
Expressões JavaScript
Uma expressão é uma combinação de valores, variáveis e operadores, que
computa para um valor.
O cálculo é chamado de avaliação.
Por exemplo, 5 * 10 é igual a 50:
5*10
Tente você mesmo »
As expressões também podem conter valores de variáveis:
x *10
Experimente você mesmo »
Os valores podem ser de vários tipos, como números e strings.
Por exemplo, "John" + " " + "Doe" avalia para "John Doe":
John Doe
Experimente você mesmo »
Palavras-chave do JavaScript
As palavras-chave do JavaScript são usadas para identificar ações a serem executadas.
Odeixea palavra-chave informa ao navegador para criar variáveis:
deixe x, y;
x =5+6;
y = x * 10;
Experimente você mesmo »
Ovara palavra-chave também diz ao navegador para criar variáveis:
varx, y;
x = 5 + 6;
y = x * 10;
Tente você mesmo »
Nestes exemplos, usandovaroudeixewill produce the same result.
Você aprenderá mais sobrevaredeixemais tarde neste tutorial.
JavaScript Comments
Nem todas as instruções JavaScript são "executadas".
Código após barras duplas// ou entre/* e*/ é tratado como um comentário.
Comentários são ignorados e não serão executados.
letx = 5; Eu serei executado
// x = 6; Eu NÃO serei executado
Experimente você mesmo »
Você aprenderá mais sobre comentários em um capítulo posterior.
Identificadores / Nomes em JavaScript
Identificadores são nomes em JavaScript.
Identificadores são usados para nomear variáveis, palavras-chave e funções.
As regras para nomes legais são as mesmas na maioria das linguagens de programação.
Um nome de JavaScript deve começar com:
Uma letra (A-Z ou a-z)
Um sinal de dólar ($)
Ou um sublinhado (_)
Os caracteres subsequentes podem ser letras, dígitos, sublinhados ou cifrões.
Nota
Números não são permitidos como o primeiro caractere em nomes.
Dessa forma, o JavaScript pode facilmente distinguir identificadores de números.
JavaScript é sensível a maiúsculas e minúsculas
Todos os identificadores JavaScript diferenciam maiúsculas de minúsculas.
As variáveislastName esobrenome, são duas variáveis diferentes:
letlastname, lastName;
lastName ="Doe";
lastname ="Peterson";
Experimente você mesmo »
JavaScript não interpreta LET ou Let como a palavra-chave let.
JavaScript e Camel Case
Historicamente, os programadores usaram diferentes maneiras de unir várias palavras
em uma variável chamada:
Hyphens:
first-name, last-name, master-card, inter-city.
Hífens não são permitidos no JavaScript. Eles são reservados para subtrações.
Sublinhado:
first_name, last_name, master_card, inter_city.
Upper Camel Case (Pascal Case):
FirstName, LastName, MasterCard, InterCity.
Lower Camel Case:
Programadores JavaScript tendem a usar camel case que começa com uma letra minúscula
letter:
firstName, lastName, masterCard, interCity.
Conjunto de Caracteres JavaScript
JavaScript usa o conjunto de caracteres Unicode.
O Unicode cobre (quase) todos os caracteres, pontuações e símbolos no
mundo.
Para uma análise mais detalhada, por favor, estude nosso Referência Completa de Unicode.
<!DOCTYPE html>
<html>
<body>
<h2>Números em JavaScript</h2>
<p>Números podem ser escritos com ou sem casas decimais.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 10,50;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Strings em JavaScript</h2>
<p>Strings podem ser escritos com aspas duplas ou simples.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 'John Doe';
</script>
</corpo>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Variáveis JavaScript</h2>
<p>No este exemplo, x é definido como uma variável.
Então, x é atribuído o valor de 6:
<p id="demo"></p>
<script>
deixe x;
x = 6;
[Link]("demo").innerHTML = x;
</script>
</corpo>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Operadores JavaScript</h2>
<p>JavaScript usa operadores aritméticos para calcular valores (assim como na álgebra).</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = (5 + 6) * 10;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Atribuindo Valores JavaScript</h2>
<p>No JavaScript, o operador = é usado para atribuir valores a variáveis.</p>
<p id="demo"></p>
<script>
deixe x, y;
x = 5;
y = 6;
[Link]("demo").innerHTML = x + y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Expressões JavaScript</h2>
<p>Expressões computam para valores.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = 5 * 10;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<corpo>
<h2>Expressões JavaScript</h2>
<p>As expressões computam para valores.</p>
<p id="demo"></p>
<script>
var x;
x = 5;
[Link]("demo").innerHTML = x * 10;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<corpo>
<h2>Expressões JavaScript</h2>
<p>Expressões computam para valores.</p>
<p id="demo"></p>
<script>
[Link]("demo").innerHTML = "John" + " " + "Doe";
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<corpo>
<h2>A palavra-chave <b>let</b> cria variáveis</h2>
<p id="demo"></p>
<script>
deixa x, y;
x = 5 + 6;
y = x * 10;
[Link]("demo").innerHTML = y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>A palavra-chave var cria variáveis</h2>
<p id="demo"></p>
<script>
var x, y;
x = 5 + 6;
y = x * 10;
[Link]("demo").innerHTML = y;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>Comentários em JavaScript NÃO são Executados</h2>
<p id="demo"></p>
<script>
deixe x;
x = 5;
// x = 6; Eu não serei executado
[Link]("demo").innerHTML = x;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript é Sensível a Maiúsculas e Minúsculas</h2>
<p>Tente mudar lastName para lastname.</p>
<p id="demo"></p>
<script>
let lastname, lastName;
lastName = "Doe";
lastname = "Peterson";
[Link]("demo").innerHTML = lastName;
</script>
</body>
</html>
Comentários em JavaScript
❮ AnteriorPróximo❯
Os comentários em JavaScript podem ser usados para explicar o código JavaScript, e para
torne-o mais legível.
Comentários em JavaScript também podem ser usados para evitar a execução, ao testar
código alternativo.
Comentários de linha única
Os comentários de linha única começam com//.
Qualquer texto entre// e o final da linha será ignorado pelo JavaScript (vai
não ser executado).
Este exemplo usa um comentário de linha única antes de cada linha de código:
Exemplo
// Mudar título:
[Link]("myH").innerHTML ="Minha Primeira Página";
// Mudar parágrafo:
[Link]("myP").innerHTML ="Meu primeiro parágrafo.";
Experimente você mesmo »
Este exemplo utiliza um comentário de linha única no final de cada linha para explicar
o código:
Exemplo
letx = 5; // Declara x, atribui a ele o valor de 5
lety = x + 2;// Declare y, give it the value of x + 2
Experimente você mesmo »
Comentários de várias linhas
Comentários de várias linhas começam com/* e termine com*/.
Qualquer texto entre/* e*/ será ignorado pelo JavaScript.
Este exemplo usa um comentário de várias linhas (um bloco de comentário) para explicar o
code:
Exemplo
/*
The code below will change
o cabeçalho com id = "myH"
e o parágrafo com id = "myP"
na minha página da web:
*/
[Link]("myH").innerHTML ="My First Page";
[Link]("myP").innerHTML ="Meu primeiro parágrafo.";
Experimente você mesmo »
É mais comum usar comentários de uma linha.
Comentários em bloco são frequentemente usados para documentação formal.
Usando Comentários para Prevenir Execução
Usar comentários para prevenir a execução de código é adequado para testes de código.
Adicionando// na frente de uma linha de código, muda as linhas de código de um executável
linha para um comentário.
Este exemplo usa // para evitar a execução de uma das linhas de código:
Exemplo
//[Link]("myH").innerHTML = "My First Page";
[Link]("myP").innerHTML ="Meu primeiro parágrafo.";
Experimente você mesmo »
Este exemplo usa um bloco de comentários para impedir a execução de várias linhas:
Exemplo
/*
[Link]("myH").innerHTML = "Minha Primeira Página";
[Link]("myP").innerHTML = "Meu primeiro parágrafo.";
*/
Experimente você mesmo »
❮ PreviousLog in to track progress Next❯
Variáveis JavaScript
❮ AnteriorPróximo❯
4 maneiras de declarar uma variável JavaScript:
Usandovariável
Usandodeixe
Usandoconst
Usando nada
O que são Variáveis?
As variáveis são recipientes para armazenar dados (armazenar valores de dados).
Neste exemplo,x, y, e z, são variáveis, declaradas com ovarkeyword:
Exemplo
varx = 5;
vary =6;
varz = x + y;
Experimente você mesmo »
Neste exemplo,x, y, ez, são variáveis, declaradas com odeixekeyword:
Example
letx =5;
lety =6;
letz = x + y;
Experimente você mesmo »
Neste exemplo,x, y, ez, são variáveis não declaradas:
Exemplo
x = 5;
y = 6;
z = x + y;
Tente você mesmo »
De todos os exemplos acima, você pode adivinhar:
x armazena o valor 5
y armazena o valor 6
z armazena o valor 11
Quando usar var em JavaScript?
Sempre declare variáveis JavaScript comvar,let, ouconst.
Ovara palavra-chave é usada em todo o código JavaScript de 1995 a 2015.
Odeixeeconstas palavras-chave foram adicionadas ao JavaScript em 2015.
Se você quiser que seu código funcione em navegadores mais antigos, deve usarvar.
Quando usar o const do JavaScript?
Se você quiser uma regra geral: sempre declare variáveis comconst.
Se você acha que o valor da variável pode mudar, usedeixe.
Neste exemplo,preço1, preço2, etotalsão variáveis:
Example
constpreço1 = 5;
constpreço2 = 6;
lettotal = price1 + price2;
Experimente Você Mesmo »
As duas variáveisprice1 eprice2 são declarados com oconstpalavra-chave.
Esses são valores constantes e não podem ser alterados.
A variáveltotalé declarado com odeixarpalavra-chave.
Este é um valor que pode ser alterado.
Assim como a Álgebra
Assim como na álgebra, variáveis mantêm valores:
letx =5;
lety =6;
Assim como na álgebra, variáveis são usadas em expressões:
letz = x + y;
Pelo exemplo acima, você pode adivinhar que o total é calculado em 11.
Nota
Variáveis são contêineres para armazenar valores.
ANÚNCIO
Identificadores JavaScript
Todas as variáveis JavaScript devem ser identificadas com nomes únicos.
Esses nomes únicos são chamados de identificadores.
Identificadores podem ser nomes curtos (como x e y) ou nomes mais descritivos
(age, sum, totalVolume).
The general rules for constructing names for variables (unique identifiers)
são:
Nomes podem conter letras, dígitos, sublinhados e cifrões.
Nomes devem começar com uma letra.
Os nomes também podem começar com $ e _ (mas não usaremos isso nesta
tutorial).
Os nomes são sensíveis à caixa (y e Y são variáveis diferentes).
Palavras reservadas (como palavras-chave do JavaScript) não podem ser usadas como nomes.
Nota
Os identificadores em JavaScript diferenciam maiúsculas de minúsculas.
O Operador de Atribuição
Em JavaScript, o sinal de igual (=) é um operador de 'atribuição', não um 'igual'
operador "to".
Isto é diferente de álgebra. O seguinte não faz sentido na álgebra:
x = x + 5
No JavaScript, no entanto, faz perfeito sentido: atribui o valor de x + 5
para x.
(Ele calcula o valor de x + 5 e coloca o resultado em x. O valor de x é
incrementado em 5.)
Nota
O operador "igual a" é escrito como== em JavaScript.
Tipos de Dados JavaScript
As variáveis do JavaScript podem armazenar números como 100 e valores de texto como "John"
Doe.
Na programação, valores de texto são chamados de strings de texto.
JavaScript can handle many types of data, but for now, just think of numbers
e strings.
Strings são escritas entre aspas duplas ou simples. Números são escritos
sem aspas.
Se você colocar um número entre aspas, ele será tratado como uma string de texto.
Exemplo
constpi =3.14;
letperson ="John Doe";
letanswer ='Yes I am!';
Experimente você mesmo »
Declarando uma Variável JavaScript
Criar uma variável em JavaScript é chamado de "declarar" uma variável.
Você declara uma variável JavaScript com ovarou odeixekeyword:
varcarName;
ou:
letcarName;
Após a declaração, a variável não tem valor (tecnicamente éindefinido).
Para atribuir um valor à variável, use o sinal de igual:
carName ="Volvo";
Você também pode atribuir um valor à variável ao declará-la:
letcarName ="Volvo";
No exemplo abaixo, criamos uma variável chamadacarName e atribua o
valor "Volvo" para isso.
Então nós "exibimos" o valor dentro de um parágrafo HTML com id="demo":
Exemplo
<pid="demo"></pid>
<script>
letcarName ="Volvo";
[Link]("demo").innerHTML = carName;
</script>
Tente você mesmo »
Note
É uma boa prática de programação declarar todas as variáveis no início de
a script.
Uma Declaração, Muitas Variáveis
Você pode declarar muitas variáveis em uma única instrução.
Comece a declaração comdeixee separa as variáveis por vírgula:
Exemplo
letperson ="John Doe", carName ="Volvo", price =200;
Experimente você mesmo »
Uma declaração pode abranger várias linhas:
Exemplo
letperson ="John Doe",
carName ="Volvo",
price =200;
Experimente você mesmo »
Value = undefined
Em programas de computador, as variáveis são frequentemente declaradas sem um valor. O
o valor pode ser algo que precisa ser calculado, ou algo que será
fornecido posteriormente, como entrada do usuário.
Uma variável declarada sem um valor terá o valorindefinido.
A variável carName terá o valorindefinidoapós a execução disso
statement:
Exemplo
letcarName;
Experimente você mesmo »
Re-declarando Variáveis JavaScript
Se você re-declarar uma variável JavaScript declarada comvar, não perderá seu
valor.
A variávelcarName ainda terá o valor "Volvo" após a execução de
essas declarações:
Exemplo
varcarName ="Volvo";
varcarName;
Experimente você mesmo »
Nota
Você não pode re-declarar uma variável declarada comdeixeouconst.
Isso não vai funcionar:
letcarName ="Volvo";
letcarName;
JavaScript Arithmetic
Assim como na álgebra, você pode fazer aritmética com variáveis JavaScript, usando
operadores como= e+:
Exemplo
letx = 5 + 2 + 3;
Experimente Você Mesmo »
Você também pode adicionar strings, mas as strings serão concatenadas:
Exemplo
letx = "John" + " " + "Doe";
Experimente você mesmo »
Tente isto também:
Exemplo
letx = "5" + 2 + 3;
Tente você mesmo »
Nota
Se você colocar um número entre aspas, os demais números serão tratados como
strings, e concatenados.
Agora tente isso:
Exemplo
letx = 2 + 3 + "5";
Experimente você mesmo »
JavaScript Cifrão $
Uma vez que o JavaScript trata o sinal de dólar como uma letra, identificadores que contêm $ são
nombres de variáveis válidos:
Example
let$ ="Hello World";
deixe$$$ =2;
let$meuDinheiro = 5;
Experimente você mesmo »
Usar o sinal de dólar não é muito comum em JavaScript, mas é profissional
programmers often use it as an alias for the main function in a JavaScript
biblioteca.
Na biblioteca JavaScript jQuery, por exemplo, a função principal$ é usado para
selecionar elementos HTML. No jQuery$("p");significa 'selecionar todos os elementos p'.
JavaScript Underscore (_)
Como o JavaScript trata o sublinhado como uma letra, identificadores contendo _ são
nomes de variáveis válidos:
Exemplo
let_lastName ="Johnson";
let_x = 2;
let_100 =5;
Experimente você mesmo »
Usar o sublinhado não é muito comum em JavaScript, mas é uma convenção
entre programadores profissionais é usá-lo como um alias para "privado"
(variáveis 'ocultas').
Teste a si mesmo com exercícios
Exercício:
Crie uma variável chamadacarName e atribua o valorVolvo para isso.
var = " ";
JavaScript Let
❮ AnteriorPróximo❯
Odeixea palavra-chave foi introduzida no ES6 (2015).
Variáveis definidas comdeixenão pode ser declarado novamente.
Variáveis definidas comdeixedeve ser declarado antes do uso.
Variáveis definidas comdeixarter escopo de bloco.
Não pode ser re-declarado
Variáveis definidas comdeixarnão pode ser redeclarado.
Você não pode acidentalmente redeclarar uma variável declarada comdeixe.
Comdeixevocê não pode fazer isso:
letx ="John Doe";
letx =0;
Comvarvocê pode:
varx ="John Doe";
varx = 0;
Escopo de Bloco
Before ES6 (2015), JavaScript hadGlobal ScopeandFunction Scope.
O ES6 introduziu duas novas palavras-chave importantes no JavaScript:deixareconst.
Essas duas palavras-chave fornecem Escopo de Bloco em JavaScript.
Variáveis declaradas dentro de um bloco { } não podem ser acessadas de fora
block:
Exemplo
{
letx = 2;
}
// x não pode ser usado aqui
Variáveis declaradas com ovara palavra-chave NÃO pode ter escopo de bloco.
Variáveis declaradas dentro de um bloco { } podem ser acessadas de fora do bloco.
Exemplo
{
varx = 2;
}
// x PODE ser usado aqui
Redefinindo Variáveis
Re-declarando uma variável usando ovarpalavra-chave pode impor problemas.
Redefinir uma variável dentro de um bloco também redefinirá a variável fora.
o bloco:
Exemplo
varx =10;
// Aqui x é 10
{
varx = 2;
// Aqui x é 2
}
// Aqui x é 2
Tente você mesmo »
Redefinindo uma variável usando odeixea palavra-chave pode resolver este problema.
Redeclarar uma variável dentro de um bloco não redeclara a variável fora.
o bloco:
Exemplo
letx =10;
// Aqui x é 10
{
letx =2;
// Aqui x é 2
}
// Aqui x é 10
Experimente você mesmo »
Suporte ao Navegador
Odeixea palavra-chave não é totalmente suportada no Internet Explorer 11 ou anterior.
A tabela a seguir define as primeiras versões de navegadores com suporte completo para
odeixekeyword:
Chrome 49 Edge 12 Firefox 44 Safari 11
Março, 2016 Jul, 2015 Jan, 2015 Set, 2017
ANÚNCIO
Redeclarando
Redeclarando uma variável JavaScript comvaré permitido em qualquer lugar de um programa:
Exemplo
varx = 2;
// Agora x é 2
varx =3;
// Agora x é 3
Experimente você mesmo »
Comdeixe, redeclarar uma variável no mesmo bloco NÃO é permitido:
Exemplo
varx =2; // Allowed
letx = 3; // Não permitido
{
letx = 2; // Permitido
letx =3; // Não permitido
}
{
letx = 2; // Permitido
varx = 3; // Não permitido
}
Redeclarando uma variável comdeixar, em outro bloco, É permitido:
Example
letx = 2; // Permitido
{
letx = 3; // Permitido
}
{
letx = 4; // Permitido
}
Tente você mesmo »
Deixe o içamento
Variáveis definidas comvararehoistedto the top and can be initialized at
a qualquer momento.
Significado: Você pode usar a variável antes de ela ser declarada:
Exemplo
Isso está ok:
carName ="Volvo";
varcarName;
Experimente você mesmo »
Se você quiser aprender mais sobre hoisting, estude o capítulo JavaScript
Içamento.
Variáveis definidas comdeixetambém são içados para o topo do bloco, mas não
iniciado.
Significado: Usando umdeixevariável antes de ser declarada resultará em
aReferenceError:
Exemplo
carName ="Saab";
letcarName ="Volvo";
Tente você mesmo »
❮ PreviousLog in to track progress Next❯
JavaScript Const
❮ AnteriorPróximo❯
Oconsta palavra-chave foi introduzida no ES6 (2015).
Variáveis definidas comconstnão pode ser redeclarado.
Variáveis definidas comconst não pode ser reatribuído.
Variáveis definidas comconsttem escopo de bloco.
Não pode ser realocado
Aconsta variável não pode ser reatribuída:
Exemplo
constPI = 3.141592653589793;
PI =3.14; // Isso irá gerar um erro
PI = PI +10; // Isso também dará um erro
Tente você mesmo »
Deve ser designado
JavaScriptconstas variáveis devem ser atribuídas a um valor quando são declaradas:
Correct
constPI =3.14159265359;
Incorreto
constantePI;
PI =3.14159265359;
Quando usar o const do JavaScript?
Sempre declare uma variável comconstquando você sabe que o valor
não deve ser alterado.
Usarconstquando você declarar:
A new Array
Um novo Objeto
Uma nova Função
Uma nova RegExp
Objetos e Arrays Constantes
A palavra-chaveconsté um pouco enganoso.
It does not define a constant value. It defines a constant reference to a
valor.
Por causa disso, você NÃO pode:
Reatribuir um valor constante
Reatribuir um array constante
Reatribuir um objeto constante
Mas você PODE:
Mude os elementos do array constante
Mude as propriedades do objeto constante
Arrays Constantes
Você pode mudar os elementos de um array constante:
Exemplo
// Você pode criar um array constante:
constcars = ["Saab","Volvo","BMW"];
// Você pode mudar um elemento:
cars[0] ="Toyota";
// Você pode adicionar um elemento:
[Link]("Audi");
Experimente Você Mesmo »
Mas você NÃO pode reassociar o array:
Exemplo
constcars = ["Saab","Volvo","BMW"];
cars = ["Toyota","Volvo","Audi"]; // ERROR
Experimente você mesmo »
Objetos Constantes
Você pode mudar as propriedades de um objeto constante:
Exemplo
// Você pode criar um objeto const:
constcar = {type:"Fiat", model:"500", color:"white"};
Você pode mudar uma propriedade:
[Link] ="red";
// Você pode adicionar uma propriedade:
[Link] ="Johnson";
Experimente Você Mesmo »
Mas você NÃO pode reassinar o objeto:
Exemplo
constcar = {type:"Fiat", model:"500", color:"white"};
car = {type:"Volvo", model:"EX60", color:"red"}; // ERROR
Tente você mesmo »
Suporte a Navegadores
Oconsta palavra-chave não é totalmente suportada no Internet Explorer.
A tabela a seguir define as primeiras versões de navegador com suporte total para
oconstkeyword:
Chrome 49 Edge 12 Firefox 36 Safari 11
Mar, 2016 Jul, 2015 Fev, 2015 Set, 2017
ANÚNCIO
Escopo de Bloco
Declarando uma variável comconsté semelhante adeixequando se trata de Bloquear
Escopo.
O x declarado no bloco, neste exemplo, não é o mesmo que o x
declarado fora do bloco:
Exemplo
constx = 10;
// Aqui x é 10
{
constx = 2;
// Aqui x é 2
}
// Aqui x é 10
Experimente você mesmo »
Você pode aprender mais sobre o escopo de bloco no capítulo Escopo em JavaScript.
Re-declarando
Redefinindo um JavaScriptvara variável é permitida em qualquer lugar de um programa:
Exemplo
varx = 2; // Permitido
varx = 3; // Permitido
x = 4; // Permitido
Redefinindo um existentevaroulet variável paraconst, no mesmo escopo, é
não permitido
Exemplo
varx =2; // Permitido
constx =2; // Não permitido
{
letx = 2; // Permitido
constx = 2; // Não é permitido
}
{
constx =2; // Permitido
constx =2; // Não permitido
}
Reatribuição de um existenteconstvariável, no mesmo escopo, não é permitida:
Exemplo
constx = 2; // Permitido
x = 2; // Não permitido
varx = 2; // Not allowed
letx = 2; // Não permitido
constx = 2; // Not allowed
{
constx = 2; // Allowed
x = 2; // Not allowed
varx = 2; Não permitido
letx =2; // Não permitido
constx = 2; não permitido
}
Redefinindo uma variável comconst, em outro escopo, ou em outro bloco, é
permitido
Exemplo
const x = 2; // Permitido
{
constx = 3; // Permitido
}
{
constx = 4; // Permitido
}
Elevação
Variáveis definidas comvarsão içados para o topo e podem ser inicializados em
a qualquer momento.
Meaning: You can use the variable before it is declared:
Exemplo
Isso está ok:
carName ="Volvo";
varcarName;
Tente você mesmo »
Se você quiser aprender mais sobre içamento, estude o capítulo JavaScript
Elevação.
Variáveis definidas comconsttambém são içados para o topo, mas não inicializados.
Significado: Usando umconstvariável antes de ser declarada resultará em
aErro de referência:
Exemplo
alert(carName);
constcarName ="Volvo";
Experimente você mesmo »
Operadores JavaScript
❮ AnteriorPróximo❯
O operador de adição + adiciona números:
O operador de atribuição = atribui um valor a uma variável.
Tarefa de JavaScript
O Operador de Atribuição(=) atribui um valor a uma variável:
Exemplos de Tarefas
letx =10;
Tente você mesmo »
// Atribua o valor 5 a x
letx =5;
// Atribua o valor 2 a y
lety =2;
// Atribua o valor x + y a z:
letz = x + y;
Experimente você mesmo »
Adição em JavaScript
O Operador de Adição(+) adiciona números:
Adicionando
letx =5;
lety =2;
letz = x + y;
Experimente você mesmo »
Multiplicação em JavaScript
O Operador de Multiplicação(*) multiplica números:
Multiplicando
letx =5;
lety =2;
letz = x * y;
Experimente você mesmo »
ANÚNCIO
Tipos de Operadores JavaScript
Existem diferentes tipos de operadores JavaScript:
Operadores Aritméticos
Operadores de Atribuição
Operadores de Comparação
Operadores de String
Operadores Lógicos
Operadores Bitwise
Operadores Ternários
Operadores de Tipo
Operadores Aritméticos em JavaScript
Os operadores aritméticos são usados para realizar operações aritméticas em números:
Exemplo de Operadores Aritméticos
leta =3;
letx = (100+50) * a;
Experimente você mesmo »
Operador Descrição
+ Adição
- Subtração
* Multiplicação
** Exponenciação (ES2016)
/ Divisão
% Módulo (Resto da Divisão)
++ Incremento
-- Decrementar
Os operadores aritméticos estão totalmente descritos no capítulo de Aritmética do JS.
Operadores de Atribuição em JavaScript
Os operadores de atribuição atribuem valores às variáveis do JavaScript.
O Operador de Atribuição de Adição+=) adiciona um valor a uma variável.
Tarefa
letx =10;
x +=5;
Experimente você mesmo »
Operador Exemplo O Mesmo Que
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Os operadores de atribuição estão completamente descritos no capítulo de Atribuição do JS.
Operadores de Comparação JavaScript
Operador Description
== igual a
=== valor igual e tipo igual
!= não igual
!== valor não igual ou tipo não igual
> maior que
< menos que
>= maior ou igual a
<= menor ou igual a
? operador ternário
Os operadores de comparação estão completamente descritos no capítulo de Comparações do JS.
Comparação de String em JavaScript
Todos os operadores de comparação acima também podem ser usados em strings:
Exemplo
lettext1 ="A";
B
letresult = texto1 < texto2;
Experimente você mesmo »
Observe que as strings são comparadas alfabeticamente:
Exemplo
lettext1 ="20";
5
letresult = texto1 < texto2;
Experimente você mesmo »
Adição de String em JavaScript
The + também pode ser usado para adicionar (concatenar) strings:
Exemplo
lettext1 ="John";
Doe
lettext3 = text1 + " " + text2;
Tente você mesmo »
O+= o operador de atribuição também pode ser usado para adicionar (concatenar) strings:
Exemplo
lettext1 ="What a very ";
dia bonito
O resultado do texto1 será:
Que dia muito bonito
Experimente Você Mesmo »
Quando usado em strings, o operador + é chamado de operador de concatenação.
Adicionando Strings e Números
Adicionar dois números retornará a soma, mas adicionar um número e uma string
vai retornar uma string:
Exemplo
letx = 5 + 5;
lety ="5"+5;
letz ="Olá"+5;
O resultado de x, y e z será:
10
55
Hello5
Experimente por si mesmo »
Se você adicionar um número e uma string, o resultado será uma string!
Operadores Lógicos em JavaScript
Operador Description
&& lógico e
|| ou lógico
! negação lógica
Os operadores lógicos estão totalmente descritos no capítulo Comparações do JS.
Operadores de Tipo JavaScript
Operador Description
tipo de Retorna o tipo de uma variável
instanceof Retorna verdadeiro se um objeto for uma instância de um objeto t
Os operadores de tipo estão totalmente descritos no capítulo de Conversão de Tipo do JS.
Operadores Bitwise do JavaScript
Operadores bit a bit funcionam em números de 32 bits.
Qualquer operando numérico na operação é convertido em um número de 32 bits. O
o resultado é convertido de volta para um número JavaScript.
Operador Description Exemplo Igual a
& E 5e1 0101 & 0001
| OU 5|1 0101 | 0001
~ NÃO ~5 ~0101
^ XOR 5^1 0101 ^ 0001
<< deslocamento à esquerda 5 << 1 0101 << 1
>> deslocamento à direita 5 >> 1 0101 >> 1
>>> deslocamento à direita sem sinal 5 >>> 1 0101 >>> 1
Os exemplos acima usam exemplos não assinados de 4 bits. Mas o JavaScript usa 32-
números com sinal em bits.
Por causa disso, em JavaScript, ~ 5 não retornará 10. Ele retornará -6.
~00000000000000000000000000000101 retornará
11111111111111111111111111111010
Os operadores bitwise são totalmente descritos no capítulo Bitwise do JS.
Teste-se com Exercícios
Exercício:
Multiplicar10com5, e alerte o resultado.
alert(10 5);
Aritmética JavaScript
❮ AnteriorPróximo❯
Operadores Aritméticos em JavaScript
Os operadores aritméticos realizam operações aritméticas em números (literais ou variáveis).
Operador Description
+ Adição
- Subtração
* Multiplicação
** Exponenciação (ES2016)
/ Divisão
% Módulo (Resto)
++ Incremento
-- Decremento
Operações Aritméticas
Uma operação aritmética típica opera em dois números.
Os dois números podem ser literais:
Exemplo
letx =100+50;
Tente você mesmo »
ou variáveis:
Exemplo
letx = a + b;
Tente você mesmo »
ou expressões:
Exemplo
letx = (100+50) * a;
Tente você mesmo »
Operadores e Operandos
Os números (em uma operação aritmética) são chamados de operandos.
A operação (a ser realizada entre os dois operandos) é definida por
um operador.
Operando Operador Ópera
100 + 50
ANÚNCIO
Adicionando
O operador de adição+) adiciona números:
Exemplo
letx =5;
lety =2;
letz = x + y;
Tente você mesmo »
Subtraindo
O operador de subtração-) subtrai números.
Exemplo
letx = 5;
lety =2;
letz = x - y;
Tente você mesmo »
Multiplicando
O operador de multiplicação (*) multiplica números.
Exemplo
letx = 5;
lety =2;
letz = x * y;
Tente você mesmo »
Dividindo
O operador de divisão (/) divide números.
Exemplo
letx =5;
lety =2;
letz = x / y;
Experimente você mesmo »
Resto
O operador de módulo%) retorna o resto da divisão.
Exemplo
letx =5;
lety =2;
letz = x % y;
Tente Você Mesmo »
Na aritmética, a divisão de dois inteiros produz um quociente e
um lembrete.
Na matemática, o resultado de uma operação de módulo é o resto de um
divisão aritmética.
Incrementando
O operador de incremento++) incrementa números.
Exemplo
letx = 5;
x++;
letz = x;
Experimente você mesmo »
Decrementando
O operador de decremento --) decrements numbers.
Exemplo
letx =5;
x--;
letz = x;
Tente você mesmo »
Exponentiação
O operador de exponenciação**) eleva o primeiro operando à potência de
o segundo operando.
Exemplo
letx =5;
letz = x ** 2;
Experimente você mesmo »
x ** y produz o mesmo resultado [Link](x,y):
Exemplo
letx =5;
letz = [Link](x,2);
Tente você mesmo »
Operator Precedence
A precedência de operadores descreve a ordem em que as operações são realizadas
em uma expressão aritmética.
Exemplo
letx =100 + 50 * 3;
Tente você mesmo »
O resultado do exemplo acima é o mesmo que 150 * 3, ou é o mesmo que 100
+ 150?
A adição ou a multiplicação é feita primeiro?
Como na matemática escolar tradicional, a multiplicação é feita primeiro.
Multiplicação*) e divisão (/) tem precedência mais alta do que adição (+)
e subtração (-).
E (como na matemática escolar) a precedência pode ser alterada pelo uso de
parênteses.
Ao usar parênteses, as operações dentro dos parênteses são
computado primeiro:
Exemplo
letx = (100+50) *3;
Experimente Você Mesmo »
Quando muitas operações têm a mesma precedência (como a adição e
subtração ou multiplicação e divisão), elas são calculadas da esquerda para
direito
Exemplos
letx =100+50-3;
Tente Você Mesmo »
letx = 100/50*3;
Experimente você mesmo »
Nota
Para uma lista completa de valores de precedência de operadores, vá para:
Valores de Precedência dos Operadores JavaScript.
Teste-se com exercícios
Exercício:
Divida10por2, e alerte o resultado.
alert(10 2);
Tarefa de JavaScript
❮ AnteriorPróximo❯
Operadores de Atribuição em JavaScript
Os operadores de atribuição atribuem valores às variáveis JavaScript.
Operador Exemplo O Mesmo Que
= x=y x=y
+= x += y x=x+y
-= x -= y x=x-y
*= x *= y x=x*y
/= x /= y x=x/y
%= x %= y x=x%y
**= x **= y x = x ** y
Operadores de Atribuição de Deslocamento
Operador Exemplo Mesmo Que
<<= x <<= y x = x << y
>>= x >>= y x = x >> y
>>>= x >>>= y x = x >>> y
Operadores de Atribuição Bit a Bit
Operador Exemplo Mesmo que
&= x &= y x=x&y
^= x ^= y x=x^y
|= x |= y x=x|y
Operadores de Atribuição Lógica
Operador Exemplo Mesmo Que
&&= x &&= y x = x && (x = y)
||= x ||= y x = x || (x = y)
??= x ??= y x = x ?? (x = y)
Nota
Os operadores de atribuição lógica são ES2020.
O operador =
O operador de atribuição simples atribui um valor a uma variável.
Exemplos Simples de Atribuição
letx =10;
Experimente você mesmo »
letx = 10 + y;
Tente Você Mesmo »
O operador +=
O operador de atribuição de adição adiciona um valor a uma variável.
Exemplos de Atribuição de Adição
letx =10;
x += 5;
Tente você mesmo »
Olá Mundo
Experimente Você Mesmo »
O Operador -=
O operador de atribuição de subtração subtrai um valor de uma variável.
Exemplo de Atribuição de Subtração
letx =10;
x -= 5;
Experimente você mesmo »
O operador *=
O operador de atribuição de multiplicação multiplica uma variável.
Exemplo de Atribuição de Multiplicação
letx = 10;
x *= 5;
Experimente você mesmo »
O **= Operador
O operador de atribuição de exponenciação eleva uma variável à potência
do operando.
Exemplo de Atribuição de Exponenciação
letx =10;
x **=5;
Tente você mesmo »
O Operador /=
TheDivision Assignment Operatordivides a variable.
Exemplo de Atribuição de Divisão
letx =10;
x /=5;
Experimente você mesmo »
O operador %=
O operador de atribuição de resto atribui um resto a uma variável.
Exemplo de Atribuição de Resto
letx =10;
x %=5;
Experimente Você Mesmo »
ANÚNCIO
O operador <<=
O Operador de Atribuição de Deslocamento à Esquerda desloca uma variável para a esquerda.
Left Shift Assignment Example
letx = -100;
x <<=5;
Tente você mesmo »
O operador >>=
O operador de atribuição de deslocamento à direita desloca uma variável (com sinal) para a direita.
Exemplo de Atribuição de Deslocamento à Direita
letx = -100;
x >>= 5;
Experimente você mesmo »
O operador >>>=
O Operador de Atribuição de Deslocamento à Direita Não Assinada desloca uma variável para a direita
(não assinado).
Exemplo de Atribuição de Deslocamento à Direita Não Assinado
letx = -100;
x >>>=5;
Experimente você mesmo »
O Operador &=
O Operador de Atribuição AND Bitwise realiza uma operação AND bitwise em
dois operandos e atribui o resultado à variável.
Exemplo de Atribuição com E Bit a Bit
letx =10;
x &= 5;
Experimente você mesmo »
O operador |=
O Operador de Atribuição OR Bitwise realiza uma operação OR bit a bit em dois
operações e atribui o resultado à variável.
Exemplo de Atribuição Bitwise OR
letx =10;
x |=5;
Experimente por si mesmo »
O Operador ^=
O operador de atribuição XOR bit-a-bit realiza uma operação XOR bit-a-bit em
dois operandos e atribui o resultado à variável.
Bitwise XOR Assignment Example
letx =10;
x ^=5;
Experimente você mesmo »
O Operador &&=
O operador de atribuição lógico E é usado entre dois valores.
If the first value is true, the second value is assigned.
Exemplo de Atribuição Lógica E
letx = 10;
x &&=5;
Tente você mesmo »
O&&= o operador é um recurso do ES2020.
O operador ||=
TheLogical OR assignment operatoris used between two values.
Se o primeiro valor for falso, o segundo valor é atribuído.
Exemplo de Atribuição Lógica OU
letx =10;
x ||=5;
Experimente você mesmo »
O||= o operador é um recurso do ES2020.
O operador ??=
O operador de atribuição de coalescência nula é usado entre dois valores.
Se o primeiro valor for indefinido ou nulo, o segundo valor é atribuído.
Exemplo de Atribuição de Coalescência Nula
letx =10;
x ??=5;
Experimente você mesmo »
O??= o operador é um recurso do ES2020.
Teste-se com exercícios
Exercício:
Use o operador de atribuição correto que resultará emxser15(mesmo quex =
x + y).
x = 10;
y = 5;
x y;
Tipos de Dados JavaScript
❮ AnteriorPróximo❯
JavaScript tem 8 Tipos de Dados
String
2. Número
3. Bigint
4. Booleano
5. Indefinido
6. Nulo
7. Symbol
8. Objeto
O Tipo de Dado Objeto
O tipo de dado objeto pode conter:
1. Um objeto
2. Um array
3. A date
Exemplos
// Numbers:
letlength =16;
letweight =7.5;
// Strings:
letcolor ="Yellow";
letlastName ="Johnson";
// Booleanos
letx =true;
lety =false;
// Object:
constperson = {firstName:"John", lastName:"Doe"};
// Objeto de array:
constcars = ["Saab","Volvo","BMW"];
// Objeto de data:
const data = new Date("2022-03-25");
Nota
Uma variável JavaScript pode armazenar qualquer tipo de dado.
O Conceito de Tipos de Dados
Na programação, tipos de dados é um conceito importante.
Para poder operar em variáveis, é importante saber algo sobre
o tipo.
Sem tipos de dados, um computador não pode resolver isso com segurança:
letx = 16 + "Volvo";
Faz sentido adicionar 'Volvo' a dezesseis? Isso vai produzir um erro ou
Isso produzirá um resultado?
O JavaScript tratará o exemplo acima como:
letx = "16" + "Volvo";
Nota
Ao adicionar um número e uma string, o JavaScript tratará o número como um
string.
Exemplo
letx = 16 + "Volvo";
Experimente você mesmo »
Exemplo
letx ="Volvo"+16;
Tente você mesmo »
O JavaScript avalia expressões da esquerda para a direita. Diferentes sequências podem
produzir resultados diferentes
JavaScript:
letx = 16 + 4 + "Volvo";
Result:
20Volvo
Tente você mesmo »
JavaScript:
letx ="Volvo"+16+4;
Result:
Volvo164
Tente você mesmo »
In the first example, JavaScript treats 16 and 4 as numbers, until it reaches
"Volvo".
No segundo exemplo, como o primeiro operando é uma string, todos os operandos são
tratados como strings.
ANÚNCIO
Os tipos em JavaScript são dinâmicos
JavaScript tem tipos dinâmicos. Isso significa que a mesma variável pode ser
usado para armazenar diferentes tipos de dados:
Exemplo
deixe // Agora x está indefinido
x = 5; // Agora x é um Número
x = "John";// Agora x é uma String
Tente você mesmo »
Strings em JavaScript
Uma string (ou uma cadeia de texto) é uma série de caracteres como "John Doe".
Strings are written with quotes. You can use single or double quotes:
Exemplo
// Usando aspas duplas:
letcarName1 ="Volvo XC60";
// Usando aspas simples:
letcarName2 ='Volvo XC60';
Tente você mesmo »
Você pode usar aspas dentro de uma string, contanto que não correspondam às aspas.
cercando a string:
Exemplo
// Apóstrofo dentro de aspas duplas:
letanswer1 ="It's alright";
// Aspas simples dentro de aspas duplas:
Ele é chamado de 'Johnny'
// Aspas duplas dentro de aspas simples:
Ele é chamado de "Johnny"
Experimente você mesmo »
You will learn more aboutstringslater in this tutorial.
Números JavaScript
Todos os números JavaScript são armazenados como números decimais (ponto flutuante).
Números podem ser escritos com ou sem decimais:
Exemplo
// Com decimais:
letx1 =34,00;
// Sem decimais:
letx2 =34;
Experimente você mesmo »
Notação Exponencial
Números extra grandes ou extra pequenos podem ser escritos com notação científica
(exponencial) notação:
Exemplo
lety =123e5; 12300000
letz = 123e-5; 0,00123
Experimente você mesmo »
Nota
A maioria das linguagens de programação tem muitos tipos numéricos:
Números inteiros:
byte (8-bit), short (16-bit), int (32-bit), long (64-bit)
Números reais (ponto flutuante):
float (32 bits), double (64 bits).
Números em Javascript são sempre de um tipo:
double (ponto flutuante de 64 bits).
Você aprenderá mais sobre números mais tarde neste tutorial.
JavaScript BigInt
Todos os números JavaScript são armazenados em um formato de ponto flutuante de 64 bits.
O BigInt do JavaScript é um novo tipo de dado (ES2020) que pode ser usado para armazenar
valores inteiros que são grandes demais para serem representados por um JavaScript normal
Número.
Exemplo
letx = BigInt("123456789012345678901234567890");
Tente você mesmo »
Você aprenderá mais sobre BigInt mais tarde neste tutorial.
Booleans em JavaScript
Os valores booleanos só podem ter dois valores:verdadeirooufalso.
Exemplo
letx = 5;
lety =5;
letz =6;
(x == y) // Retorna verdadeiro
(x == z) Retorna falso
Experimente você mesmo »
OsBooleanos são frequentemente usados em testes condicionais.
Você aprenderá mais sobre booleanos mais tarde neste tutorial.
Arrays em JavaScript
Arrays em JavaScript são escritos com colchetes.
Os itens do array são separados por vírgulas.
O código a seguir declara (cria) um array chamadocarros, contendo três
items (car names):
Exemplo
constcars = ["Saab","Volvo","BMW"];
Experimente você mesmo »
Os índices de array são baseados em zero, o que significa que o primeiro item é [0], o segundo é
[1], e assim por diante.
Você aprenderá mais sobre arrays mais tarde neste tutorial.
Objetos JavaScript
Objetos JavaScript são escritos com chaves{}.
As propriedades do objeto são escritas como pares nome:valor, separadas por vírgulas.
Exemplo
constperson = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Experimente você mesmo »
The object (person) in the example above has 4 properties: firstName,
lastName, age, and eyeColor.
Você aprenderá mais sobre objetos mais tarde neste tutorial.
O operador typeof
Você pode usar o JavaScripttipo deoperador para encontrar o tipo de um JavaScript
variável.
Otipo deo operador retorna o tipo de uma variável ou uma expressão:
Exemplo
typeof"" // Retorna "string"
typeof"John" // Retorna "string"
typeof "John Doe" // Retorna "string"
Experimente você mesmo »
Exemplo
tipo0 // Retorna "número"
typeof314 // Retorna "número"
typeof3.14 // Retorna "número"
typeof(3) // Retorna "número"
typeof(3+4) // Retorna "número"
Experimente você mesmo »
Você aprenderá mais sobre typeof mais tarde neste tutorial.
Indefinido
Em JavaScript, uma variável sem um valor tem o valorundefined. O tipo
também éindefinido.
Exemplo
letcar // O valor está indefinido, o tipo está indefinido
Experimente você mesmo »
Qualquer variável pode ser esvaziada, definindo o valor comoindefinidoO tipo vai
também serindefinido.
Exemplo
car = undefined; // O valor está indefinido, o tipo está indefinido
Experimente você mesmo »
Valores Vazios
Um valor vazio não tem nada a ver comindefinido.
Uma string vazia tem tanto um valor legal quanto um tipo.
Exemplo
letcar =""; // The value is "", the typeof is "string"
Experimente você mesmo »
Teste-se com Exercícios
Exercício:
Use comments to describe the correct data type of the following variables:
deixe comprimento = 16; //
let lastName = "Johnson"; //
const x = {
firstName: "John",
lastName: "Doe"
}; //
Funções JavaScript
❮ AnteriorPróximo❯
Uma função JavaScript é um bloco de código projetado para realizar uma tarefa específica
tarefa.
Uma função JavaScript é executada quando "algo" a invoca (a chama).
Exemplo
// Função para calcular o produto de p1 e p2
função minhaFunção(p1, p2) {
retornarp1 * p2;
}
Tente você mesmo »
Sintaxe da Função JavaScript
Uma função JavaScript é definida com ofunçãopalavra-chave, seguida por
um nome, seguido por parênteses().
Nomes de funções podem conter letras, dígitos, sublinhados e cifrões
(as mesmas regras das variáveis).
Os parênteses podem incluir nomes de parâmetros separados por vírgulas:
(parâmetro1, parâmetro2, ...)
O código a ser executado, pela função, é colocado dentro de chaves:{}
funçãonome(parâmetro1, parâmetro2, parâmetro3) {
//código a ser executado
}
Os parâmetros da função estão listados dentro dos parênteses () na função
definição.
Os argumentos da função são os valores recebidos pela função quando ela é
invocado.
Dentro da função, os argumentos (os parâmetros) se comportam como locais
variáveis.
Invocação de Função
O código dentro da função será executado quando "algo" invocar (chamar)
a função:
Quando um evento ocorre (quando um usuário clica em um botão)
Quando é invocado (chamado) a partir do código JavaScript
Automaticamente (auto invocado)
Você aprenderá muito mais sobre a invocação de funções mais tarde neste tutorial.
ANÚNCIO
Retorno da Função
Quando o JavaScript atinge umretornardeclaração, a função deixará de ser executada.
Se a função foi invocada a partir de uma instrução, o JavaScript "retornará" para
execute o código após a instrução de invocação.
Funções frequentemente computam um valor de retorno. O valor de retorno é "devolvido" de volta
para o "chamador":
Exemplo
Calcule o produto de dois números e retorne o resultado:
letx = minhaFunção(4,3); // A função é chamada, o valor de retorno será
terminar em x
função minhaFunção(a, b) {
retorna * b; // Função retorna o produto de a e b
}
O resultado em x será:
12
Experimente você mesmo »
Por que Funções?
Você pode reutilizar código: defina o código uma vez e use-o muitas vezes.
Você pode usar o mesmo código várias vezes com argumentos diferentes, para produzir
resultados diferentes.
Exemplo
Converter Fahrenheit para Celsius:
functiontoCelsius(fahrenheit) {
retornar(5/9) * (fahrenheit-32);
}
[Link]("demo").innerHTML = toCelsius(77);
Experimente você mesmo »
The () Operator Invokes the Function
Usando o exemplo acima,toCelsius refere-se ao objeto de função,
etoCelsius() refere-se ao resultado da função.
Acessar uma função sem () retornará o objeto da função em vez do
função resultado.
Exemplo
functiontoCelsius(fahrenheit) {
retornar(5/9) * (fahrenheit-32);
}
[Link]("demo").innerHTML = toCelsius;
Experimente você mesmo »
Funções Usadas como Valores de Variável
Funções podem ser usadas da mesma forma que você usa variáveis, em todos os tipos de
fórmulas, atribuições e cálculos.
Exemplo
Em vez de usar uma variável para armazenar o valor de retorno de uma função:
letx = toCelsius(77);
A temperatura é
Você pode usar a função diretamente, como um valor de variável:
lettext ="The temperature is "+ toCelsius(77) +" Celsius";
Experimente você mesmo »
Você aprenderá muito mais sobre funções mais adiante neste tutorial.
Variáveis Locais
As variáveis declaradas dentro de uma função JavaScript tornam-se LOCAIS para a
função.
As variáveis locais só podem ser acessadas de dentro da função.
Exemplo
// o código aqui NÃO pode usar carName
função minhaFunção() {
letcarName ="Volvo";
// o código aqui PODE usar carName
}
// o código aqui NÃO pode usar carName
Tente você mesmo »
Uma vez que as variáveis locais são reconhecidas apenas dentro de suas funções, as variáveis com
o mesmo nome pode ser usado em diferentes funções.
As variáveis locais são criadas quando uma função começa e são deletadas quando a
a função está concluída.
Teste-se com exercícios
Exercício:
Execute a função chamadaminhaFunção.
função minhaFunção() {
alert('Olá Mundo!');
}
;
Objetos JavaScript
❮ AnteriorPróximo❯
Objetos, Propriedades e Métodos da Vida Real
Na vida real, um carro é um objeto.
Um carro tem propriedades como peso e cor, e métodos como iniciar e
pare
Objeto Propriedades
[Link] = Fiat
[Link] = 500
[Link] = 850kg
[Link] = white
Todos os carros têm as mesmas propriedades, mas os valores das propriedades diferem de carro para carro.
de carro.
Todos os carros têm os mesmos métodos, mas os métodos são executados em
tempos diferentes.
Objetos JavaScript
Você já aprendeu que as variáveis JavaScript são recipientes para dados.
valores.
Este código atribui um valor simples (Fiat) a uma variável chamada carro:
letcar ="Fiat";
Tente você mesmo »
Objetos também são variáveis. Mas objetos podem conter muitos valores.
Este código atribui muitos valores (Fiat, 500, branco) a uma variável chamada carro:
constcar = {type:"Fiat", model:"500", color:"white"};
Tente você mesmo »
Os valores são escritos como pares nome:valor (nome e valor separados por um
dois pontos).
É uma prática comum declarar objetos com oconstpalavra-chave.
Saiba mais sobre como usarconstcom objetos no capítulo: Const. JS
ANÚNCIO
Definição do Objeto
Você define (e cria) um objeto JavaScript com um literal de objeto:
Exemplo
constperson = {firstName:"John", lastName:"Doe", age:50,
eyeColor:"blue"};
Tente Você Mesmo »
Espaços e quebras de linha não são importantes. Uma definição de objeto pode se estender
multiple lines:
Exemplo
constperson = {
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"
};
Experimente você mesmo »
Propriedades do Objeto
Os pares de nome:valor em objetos JavaScript são chamados de propriedades:
Property Property Value
firstName João
lastName Doe
idade 50
eyeColor azul
Acessando Propriedades de Objetos
Você pode acessar as propriedades de objetos de duas maneiras:
[Link]
ou
objectName["propertyName"]
Exemplo1
[Link];
Experimente você mesmo »
Exemplo2
person["lastName"];
Experimente você mesmo »
Objetos JavaScript são contêineres para valores nomeados chamados propriedades.
Métodos de Objeto
Objetos também podem ter métodos.
Métodos são ações que podem ser realizadas em objetos.
Métodos são armazenados em propriedades como definições de função.
Propriedade Property Value
firstName João
lastName Doe
age 50
eyeColor azul
fullName function() {return [Link] + " " + [Link];}
A method is a function stored as a property.
Exemplo
constperson = {
firstName:"John",
lastName :"Doe",
id : 5566,
fullName :function() {
return [Link] +" "+[Link];
}
};
No exemplo acima,issorefere-se ao objeto pessoa.
[Link] thefirstNameproperty ofthis.
[Link] thefirstNameproperty ofperson.
O que é isso?
Em JavaScript, oissoa palavra-chave refere-se a um objeto.
Qual objeto depende de comoistoestá sendo invocado (usado ou chamado).
Oissoa palavra-chave se refere a diferentes objetos dependendo de como é usada:
Em um método de objeto,istorefere-se ao objeto.
Sozinho,istorefere-se ao objeto global.
Em uma função,issorefere-se ao objeto global.
Em uma função, em modo estrito,istoéindefinido.
Em um evento,issorefere-se ao elemento que recebeu o evento.
Métodos comochamar(), aplicar(), ebind()pode se referiristoa qualquer objeto.
Note
istonão é uma variável. É uma palavra-chave. Você não pode mudar o valor deisso.
Veja também:
EsteTutorialJavaScript
ThethisKeyword
Em uma definição de função,issorefere-se ao "dono" da função.
No exemplo acima,issoé o objeto pessoa que "possui"
ofullName função.
Em outras palavras,[Link] significa ofirstName propriedade deste objeto.
Saiba mais sobreistoNeste Tutorial de JavaScript.
Acessando Métodos de Objeto
Você acessa um método de objeto com a seguinte sintaxe:
[Link]()
Exemplo
name = [Link]();
Experimente Você Mesmo »
Se você acessar um método sem os () parênteses, ele retornará
a definição da função:
Exemplo
name = [Link];
Experimente Você Mesmo »
Não Declare Strings, Números, e
Booleanos como Objetos!
Quando uma variável JavaScript é declarada com a palavra-chave "novo, a variável é
criado como um objeto:
x = novaString(); // Declara x como um objeto String
y = novaNumero(); // Declara y como um objeto Number
z = novoBoolean(); // Declara z como um objeto Booleano
EvitarString, Número, eBooleanoobjetos. Eles complicam seu código e diminuem a velocidade
reduzir a velocidade de execução.
Você aprenderá mais sobre objetos mais tarde neste tutorial.
Teste-se com exercícios
Exercício:
AlertaJoãoextraindo informações dopessoaobjeto.
const person = {
firstName: "John",
lastName: "Doe"
};
alert( );
Eventos JavaScript
❮ PreviousNext ❯
Eventos HTML são "coisas" que acontecem com elementos HTML.
Quando o JavaScript é usado em páginas HTML, o JavaScript pode "reagir" a isso.
eventos.
Eventos HTML
Um evento HTML pode ser algo que o navegador faz, ou algo que um usuário.
faz.
Aqui estão alguns exemplos de eventos HTML:
Uma página web HTML terminou de carregar
Um campo de entrada HTML foi alterado
Um botão HTML foi clicado
Frequentemente, quando eventos acontecem, você pode querer fazer algo.
JavaScript permite que você execute código quando eventos são detectados.
HTML permite que atributos de manipuladores de eventos, com código JavaScript, sejam adicionados a
Elementos HTML.
Com aspas simples:
<evento de elemento= 'algum JavaScript'>
Com aspas duplas:
<evento de elemento= "algum JavaScript">
No exemplo a seguir, umonclickatributo (com código) é adicionado a
a<botão>element:
Exemplo
<buttononclick="[Link]('demo').innerHTML =
A hora é?
Tente você mesmo »
In the example above, the JavaScript code changes the content of the
elemento com id="demo".
No próximo exemplo, o código altera o conteúdo de seu próprio elemento
([Link]):
Exemplo
<button onclick="[Link] = Date()">Que horas são?</button>
Experimente você mesmo »
O código JavaScript costuma ter várias linhas. É mais comum ver eventos
atributos chamando funções:
Exemplo
<button onclick="displayDate()">Que horas são?</button>
Tente você mesmo »
ADVERTISEMENT
Eventos HTML Comuns
Aqui está uma lista de alguns eventos HTML comuns:
Evento Descrição
ao mudar Um elemento HTML foi alterado
onclick O usuário clica em um elemento HTML
ao passar o mouse O usuário move o mouse sobre um elemento HTML
ao sair do mouse O usuário afasta o mouse de um elemento HTML
onkeydown O usuário pressionou uma tecla do teclado
no carregamento O navegador terminou de carregar a página
A lista é muito mais longa: Referência JavaScript W3Schools Eventos DOM HTML.
Manipuladores de Eventos JavaScript
Os manipuladores de eventos podem ser usados para lidar e verificar a entrada do usuário, as ações do usuário, e
browser actions:
Coisas que devem ser feitas toda vez que uma página é carregada
Coisas que devem ser feitas quando a página é fechada
Ação que deve ser executada quando um usuário clica em um botão
Conteúdo que deve ser verificado quando um usuário insere dados
E mais ...
Muitos métodos diferentes podem ser usados para fazer o JavaScript trabalhar com eventos:
Atributos de evento HTML podem executar código JavaScript diretamente
Os atributos de evento HTML podem chamar funções JavaScript
Você pode atribuir suas próprias funções de manipulador de eventos aos elementos HTML
Você pode evitar que os eventos sejam enviados ou tratados
E mais ...
Você aprenderá muito mais sobre eventos e manipuladores de eventos no DOM HTML
capítulos.
Teste-se com exercícios
Exercício:
O<botão>o elemento deve fazer algo quando alguém clicar nele. Tente corrigir isso!