INTRODUÇÃO AO JAVA SCRIPT

Por que estudar JavaScript?

JavaScript é uma das 3 linguagens que todos os desenvolvedores
web devem aprender:

1. HTML para definir o conteúdo das páginas web

2. CSS para especificar o layout das páginas da web

3. JavaScript para programar o comportamento das páginas web

JAVASCRIPT PARA ONDE IR
Arquivo Externo
CÓDIGO QUE INVOCARÁ O ARQUIVO EXTERNO
Blocos de código JavaScript
Instruções JavaScript podem ser agrupadas em blocos de código, entre chaves {...}.

O objetivo dos blocos de código é definir instruções a serem executadas juntas.

Um lugar onde você encontrará instruções agrupadas em blocos é nas funções

JavaScript:
Palavras-chave JavaScript
As instruções JavaScript geralmente começam com uma palavra-chave para identificar a
ação JavaScript a ser executada.

Nossa referência de palavras reservadas lista todas as palavras-chave JavaScript.

Sintaxe JavaScript
A sintaxe JavaScript é o conjunto de regras, como os programas JavaScript são
construídos:

Valores JavaScript
A sintaxe JavaScript define dois tipos de valores:

• Valores fixos
• Valores 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. Os números são escritos com ou sem decimais:

2. Strings são textos escritos entre aspas duplas ou simples:

Variáveis JavaScript
Em uma linguagem de programação, variáveissão usadas para armazenar valores de
dados.

JavaScript usa as palavras-chave vare letpara constdeclarar variáveis .

Um sinal de igual é usado para atribuir valores às variáveis.

Neste exemplo, x é definido como uma variável. Então, x recebe (dado) o valor 6:
Operadores JavaScript
JavaScript usa operadores aritméticos ( + - * /) para calcular valores:

As expressões também podem conter valores de variáveis:

Os valores podem ser de vários tipos, como números e strings.

Por exemplo, "John" + " " + "Doe", é avaliado como "John Doe":

Palavras-chave JavaScript
Palavras-chave JavaScript são usadas para identificar ações a serem executadas.
A letpalavra-chave diz ao navegador para criar variáveis:

A varpalavra-chave também diz ao navegador para criar variáveis:

Comentários JavaScript
Nem todas as instruções JavaScript são “executadas”.

O código após barras duplas //ou entre /*e */é tratado como um comentário .

Comentários multilinhas
Comentários de várias linhas começam /*e terminam com */.

Qualquer texto entre /*e */será ignorado pelo JavaScript.

JavaScript diferencia maiúsculas de

minúsculas
Todos os identificadores JavaScript diferenciam maiúsculas de minúsculas .

As variáveis lastNamee lastname, são duas variáveis diferentes:

Variáveis JavaScript
Variáveis são contêineres para armazenamento de dados
Variáveis JavaScript podem ser declaradas de 4 maneiras:

• Automaticamente
• Usandovar
• Usandolet
• Usandoconst

• Neste primeiro exemplo, x, y e z são variáveis não declaradas.

• Eles são declarados automaticamente quando usados pela primeira vez:

Observação
É considerada uma boa prática de programação sempre declarar variáveis antes de usá-
las.
Observação
A varpalavra-chave foi usada em todo o código JavaScript de 1995 a 2015.

As palavras-chave lete constforam adicionadas ao JavaScript em 2015.

A varpalavra-chave só deve ser usada em código escrito para navegadores mais antigos.

Exemplo usando let

Exemplo usando const

Exemplo Misto

As duas variáveis price1e price2 são declaradas com a constpalavra-chave.

Esses são valores constantes e não podem ser alterados.

A variável totalé declarada com a letpalavra-chave.

O valor totalpode ser alterado.

Quando usar var, let ou const?
1. Sempre declare variáveis

2. Sempre use constse o valor não deve ser alterado

3. Sempre use constse o tipo não deve ser alterado (Arrays e Objetos)

4. Só use let se não puder usar const

5. Use apenas var se você DEVE oferecer suporte a navegadores antigos.

JavaScript Let

Escopo do bloco
Antes do ES6 (2015), o JavaScript não tinha Block Scope .

JavaScript tinha Escopo Global e Escopo de Função .

ES6 introduziu as duas novas palavras-chave JavaScript: lete const.

Essas duas palavras-chave forneceram Block Scope em JavaScript:

Âmbito global
Variáveis declaradas com varsempre possuem Escopo Global .

Variáveis declaradas com a varpalavra-chave NÃO podem ter escopo de bloco:

Não pode ser redeclarado

Variáveis definidas com let não podem ser declaradas novamente.

Você não pode declarar novamente acidentalmente uma variável declarada com let.
Redeclarando Variáveis
Redeclarar uma variável usando a varpalavra-chave pode causar problemas.

Redeclarar uma variável usando a letpalavra-chave pode resolver esse problema.

Redeclarar uma variável dentro de um bloco não irá declarar novamente a variável fora
do bloco:
Quando usar JavaScript const?
Sempre declare uma variável com constquando souber que o valor não deve ser
alterado.

Use constquando você declarar:

• Uma nova matriz

• Um novo objeto
• Uma nova função

Operadores de Atribuição JavaScript

Operadores de atribuição atribuem valores a variáveis JavaScript.

O Operador de Atribuição de Adição ( +=) adiciona um valor a uma variável.

Incrementando
O operador de incremento ( ++) incrementa números.

Decrementando
O operador de decremento ( --) diminui os números.
Exponenciação
O operador de exponenciação** ( ) eleva o primeiro operando à potência do segundo
operando.

x ** y produz o mesmo resultado que [Link](x,y):

Tipos de dados JavaScript

JavaScript tem 8 tipos de dados
1. String
2. Número
3. Bigint
4. Booleano
5. Indefinido
6. Nulo
7. Símbolo
8. Objeto

O tipo de dados do objeto

O tipo de dados do objeto pode conter:

1. Um objeto
2. Uma matriz
3. Uma data
// Numbers:
let length = 16;
let weight = 7.5;

// Strings:
let color = "Yellow";
let lastName = "Johnson";

// Booleans
let x = true;
let y = false;

// Object:
const person = {firstName:"John", lastName:"Doe"};

// Array object:
const cars = ["Saab", "Volvo", "BMW"];

// Date object:
const date = new Date("2022-03-25");

Observação
Uma variável JavaScript pode conter qualquer tipo de dados.

O conceito de tipos de dados

Na programação, os tipos de dados são um conceito importante.

Para poder operar com variáveis, é importante saber algo sobre o tipo.

Sem tipos de dados, um computador não pode resolver isso com segurança:

let x = 16 + "Volvo";

Faz algum sentido adicionar “Volvo” aos dezesseis? Produzirá um erro ou produzirá um
resultado?

JavaScript tratará o exemplo acima como:

let x = "16" + "Volvo";

Observação
Ao adicionar um número e uma string, o JavaScript tratará o número como uma string.

No primeiro exemplo, o JavaScript trata 16 e 4 como números, até chegar a “Volvo”.

No segundo exemplo, como o primeiro operando é uma string, todos os operandos são
tratados como strings.
Os tipos de JavaScript são dinâmicos
JavaScript possui tipos dinâmicos. Isso significa que a mesma variável pode ser usada
para armazenar diferentes tipos de dados:

Booleanos JavaScript
Booleanos só podem ter dois valores: trueou false.
O tipo de Operador
Você pode usar o typeofoperador JavaScript para encontrar o tipo de uma variável
JavaScript.

O typeofoperador retorna o tipo de uma variável ou expressão:

Funções JavaScript
Uma função JavaScript é um bloco de código projetado para executar uma tarefa
específica.

Uma função JavaScript é executada quando “algo” a invoca (chama).

Sintaxe da função JavaScript
Uma função JavaScript é definida com a function palavra-chave, seguida por um nome ,
seguido por parênteses () .

Os nomes das funções podem conter letras, dígitos, sublinhados e cifrões (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 entre chaves: {}

Os parâmetros da função são listados entre parênteses () na definição da função.

Argumentos de função são os valores recebidos pela função quando ela é invocada.

Dentro da função, os argumentos (os parâmetros) comportam-se como variáveis locais.

Invocação de Função
O código dentro da função será executado quando “algo” invocar (chamar) a função:

• Quando ocorre um evento (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 invocação de funções posteriormente neste tutorial.

Retorno de função
Quando o JavaScript atinge uma returninstrução, a função irá parar de ser executada.

Se a função foi invocada a partir de uma instrução, o JavaScript “retornará” para executar
o código após a instrução invocada.

As funções geralmente calculam um valor de retorno . O valor de retorno é "devolvido"

ao "chamador":
Por que funções?
Com funções você pode reutilizar código

Você pode escrever código que pode ser usado muitas vezes.

Você pode usar o mesmo código com argumentos diferentes para produzir resultados
diferentes.

O operador
O operador () invoca (chama) a função:

Acessar uma função com parâmetros incorretos pode retornar uma resposta incorreta:
Acessar uma função sem () retorna a função e não o resultado da função:
Funções usadas como valores de variáveis
As 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.
Variáveis locais
Variáveis declaradas em uma função JavaScript tornam-se LOCAIS para a função.

Variáveis locais só podem ser acessadas de dentro da função.

Como as variáveis locais só são reconhecidas dentro de suas funções, variáveis com o
mesmo nome podem ser utilizadas em funções diferentes.

Variáveis locais são criadas quando uma função é iniciada e excluídas quando a função é
concluída.
Objetos JavaScript
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 parar:

Objetos JavaScript
Você já aprendeu que variáveis JavaScript são contêineres para valores de dados.

Este código atribui um valor simples (Fiat) a uma variável chamada car:
Objetos também são variáveis. Mas os objetos podem conter muitos valores.

Este código atribui muitos valores (Fiat, 500, branco) a uma variável chamada carro:

Os valores são escritos como pares nome:valor (nome e valor separados por dois
pontos).

É uma prática comum declarar objetos com a palavra-chave const .

Saiba mais sobre como usar const com objetos no capítulo: JS Const .

Definição de Objeto
Você define (e cria) um objeto JavaScript com um objeto literal:
Acessando Propriedades do Objeto
Você pode acessar as propriedades do objeto de duas maneiras:
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 executadas em objetos.

Os métodos são armazenados em propriedades como definições de funções .

Um método é uma função armazenada como uma propriedade.

No exemplo acima, thisrefere-se ao objeto person :

[Link] significa a propriedade firstName de person .

[Link] significa a propriedade lastName de person .

Em JavaScript, a thispalavra-chave refere-se a um objeto .

Qual objeto depende de como thisestá sendo invocado (usado ou chamado).

A thispalavra-chave refere-se a diferentes objetos dependendo de como é usada:

Acessando Métodos de Objeto

Você acessa um método de objeto com a seguinte sintaxe:

[Link]()
Se você acessar um método sem os parênteses (), ele retornará a definição da
função :

Eventos JavaScript
Eventos HTML são “coisas” que acontecem aos elementos HTML.

Quando JavaScript é usado em páginas HTML, o JavaScript pode “reagir” a esses

eventos.

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 da web HTML terminou de carregar

• Um campo de entrada HTML foi alterado
• Um botão HTML foi clicado

Muitas vezes, quando os eventos acontecem, você pode querer fazer alguma coisa.

JavaScript permite executar código quando eventos são detectados.

O HTML permite que atributos do manipulador de eventos, com código JavaScript ,
sejam adicionados aos elementos HTML.

Com aspas simples:

<element event='some JavaScript'>

Com aspas duplas:

<element event="some JavaScript">

No exemplo acima, o código JavaScript altera o conteúdo do elemento com id="demo".

No próximo exemplo, o código altera o conteúdo do seu próprio elemento

(usando [Link]):

O código JavaScript geralmente tem várias linhas. É mais comum ver atributos de
eventos chamando funções:
Eventos HTML comuns
Aqui está uma lista de alguns eventos HTML comuns:

Evento Descrição

onchange Um elemento HTML foi alterado

onclick O usuário clica em um elemento HTML

onmouseover O usuário move o mouse sobre um elemento HTML

onmouseout O usuário afasta o mouse de um elemento HTML

onkeydown O usuário pressiona uma tecla do teclado

onload O navegador terminou de carregar a página

Manipuladores de eventos JavaScript

Os manipuladores de eventos podem ser usados para manipular e verificar a entrada do
usuário, as ações do usuário e as ações do navegador:

• Coisas que devem ser feitas sempre que uma página carrega
• 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 permitir que o JavaScript funcione com
eventos:

• Atributos de evento HTML podem executar código JavaScript diretamente

• Atributos de eventos HTML podem chamar funções JavaScript
• Você pode atribuir suas próprias funções de manipulador de eventos a elementos
HTML
• Você pode impedir que eventos sejam enviados ou manipulados

JavaScript Strings

Strings são para armazenar texto

Strings são escritas com aspas

Usando citações
Uma string JavaScript contém zero ou mais caracteres escritos entre aspas.
Você pode usar aspas simples ou duplas:

Observação
Strings criadas com aspas simples ou duplas funcionam da mesma forma.

Não há diferença entre os dois.

String Length

Para encontrar o comprimento de uma string, use a propriedade integrada length:

Escape Characters
Como as strings devem ser escritas entre aspas, o JavaScript interpretará mal esta
string:

let text = "We are the so-called "Vikings" from the north.";

A string será cortada para "Nós somos os chamados".

Para resolver esse problema, você pode usar um caractere de escape de barra
invertida .

O caractere de escape de barra invertida ( \) transforma caracteres especiais em

caracteres de string:
 Code Result Description

\' ' Single quote

\" " Double quote

\\ \ Backslash

Exemplos
\" insere aspas duplas em uma string:

\' insere aspas simples em uma string:

\\ insere uma barra invertida em uma string:

Seis outras sequências de escape são válidas em JavaScript:

 Code Result

\b Backspace

\f Form Feed

\n New Line

\r Carriage Return

\t Horizontal Tabulator

\v Vertical Tabulator

Observação
Os 6 caracteres de escape acima foram originalmente projetados para controlar máquinas
de escrever, teletipos e aparelhos de fax. Eles não fazem nenhum sentido em HTML.

Métodos de string JavaScript

Extraindo caracteres de string
Existem 4 métodos para extrair caracteres de string:

• O método at(position)
• O método charAt(position)
• O método charCodeAt(position)
• Usando acesso à propriedade [] como em arrays
String JavaScript charAt()
O charAt()método retorna o caractere em um índice (posição) especificado em uma string:

String JavaScript charCodeAt()

O charCodeAt()método retorna o código do caractere em um índice especificado em uma
string:

O método retorna um código UTF-16 (um número inteiro entre 0 e 65535).

String JavaScript em()
ES2022 introduziu o método string at():

O at()método retorna o caractere em um índice (posição) especificado em uma string.

O at()método é compatível com todos os navegadores modernos desde março de 2022:

Extraindo partes de string
Existem 3 métodos para extrair uma parte de uma string:

• slice(start, end)
• substring(start, end)
• substr(start, length)

Fatia de string JavaScript()

slice()extrai uma parte de uma string e retorna a parte extraída em uma nova string.

O método usa 2 parâmetros: posição inicial e posição final (fim não incluído).

Exemplo
Corte uma parte de uma string da posição 7 à posição 13:

Exemplos
Se você omitir o segundo parâmetro, o método mostrará o restante da string:
Se um parâmetro for negativo, a posição é contada a partir do final da string:

Este exemplo corta uma parte de uma string da posição -12 à posição -6:
Substring de string JavaScript()
substring()é similar a slice().

A diferença é que valores iniciais e finais menores que 0 são tratados como 0
em substring().

String JavaScript substr()

substr()é similar a slice().

A diferença é que o segundo parâmetro especifica o comprimento da peça extraída.

Se você omitir o segundo parâmetro, substr()o restante da string será cortado.

Se o primeiro parâmetro for negativo, a posição conta a partir do final da string.

______________________________________________________________________
Convertendo para maiúsculas e minúsculas
Uma string é convertida para maiúscula com toUpperCase():

Uma string é convertida para minúscula com toLowerCase():

String JavaScript paraUpperCase()

String JavaScript paraLowerCase()

String JavaScript concat()
concat()une duas ou mais strings:

O concat()método pode ser usado em vez do operador mais. Essas duas linhas fazem o
mesmo:

Exemplo
text = "Hello" + " " + "World!";
text = "Hello".concat(" ", "World!");

Observação
Todos os métodos de string retornam uma nova string. Eles não modificam a string
original.

Disse formalmente:

Strings são imutáveis: Strings não podem ser alteradas, apenas substituídas.
Corte de string JavaScript()
O trim()método remove espaços em branco de ambos os lados de uma string:

String JavaScript trimStart()

ECMAScript 2019 adicionou o método String trimStart()ao JavaScript.

O trimStart()método funciona como trim(), mas remove espaços em branco apenas do

início de uma string.

JavaScript String trimStart()é compatível com todos os navegadores modernos desde

janeiro de 2020:
String JavaScript trimEnd()
ECMAScript 2019 adicionou o método string trimEnd()ao JavaScript.

O trimEnd()método funciona como trim(), mas remove espaços em branco apenas do final
de uma string.
Preenchimento de string JavaScript
ECMAScript 2017 adicionou dois novos métodos de string ao
JavaScript: padStart() e padEnd()para oferecer suporte ao preenchimento no início e no
final de uma string.

Cadeia JavaScript padStart()

O padStart()método preenche uma string desde o início.

Ele preenche uma string com outra string (várias vezes) até atingir um determinado
comprimento.
Observação
O padStart()método é um método de string.

Para preencher um número, primeiro converta o número em uma string.

Veja o exemplo abaixo.

JavaScript String padEnd()

O padEnd()método preenche uma string do final.

Ele preenche uma string com outra string (várias vezes) até atingir um determinado
comprimento.
Observação
O padEnd()método é um método de string.

Para preencher um número, primeiro converta o número em uma string.

Veja o exemplo abaixo.

Repetição de string JavaScript()

O repeat()método retorna uma string com um número de cópias de uma string.

O repeat()método retorna uma nova string.

O repeat()método não altera a string original.