ESCOLA TÉCNICA ESTADUAL SENADOR WILSON CAMPOS

SÉRIE: 2º TDS A & B

PROFESSOR: VANDO PAZ
 HTML e CSS não é programação. JavaScript é?

Quando estamos criando código HTML e CSS, podemos

dizer que estamos “desenvolvendo em HTML”, mas é errado
dizer que estamos “programando em HTML”. HTML e CSS
são linguagens, mas não são linguagens de programação.
Essas linguagens são mais classificadas como linguagens de
marcações.

Já a JavaScript é uma linguagem de programação,

considerada uma linguagem de scripts não compilados.
Todos os códigos JS são enviados para o navegador do
cliente e são interpretados linha-a-linha, gerando o
resultado.
Sendo assim, podemos dizer “estou programando em JS”, mas não
podemos dizer “estou programando em HTML”. 2
 Exemplo de interatividade com JS?

IMPORTANTE:
Em JavaScript, as letras maiúsculas e minúsculas
fazem toda a diferença! Por exemplo, no código
acima, perceba que existe letras maiúsculas e
minúsculas no nome “getElementById”. Se você
esquecer de colocar assim, vai dar erro!
Tecnicamente, dizemos que JS é uma linguagem
case sensitive.
Ou seja é uma linguagem sensível a letras
maiúsculas e minúsculas.
Objeto
window
 Objeto window
O objeto window faz a manipulação das janelas do
navegador. Sempre que abrirmos o navegador
automaticamente esse objeto é gerado, isso acontece porque
esse objeto representa exatamente essa janela que foi
aberta. Para esse objeto ser criado não precisamos usar
nenhum tipo de linguagem, como HTML, pois isso é feito
automaticamente pelo navegador.
Esse objeto permite aos desenvolvedores criar e
abrirem novas janelas de maneiras diferentes. Esses
processos são possíveis através das propriedades e
métodos que o objeto window possui. Para utiliza-los basta
seguirmos a seguinte sintaxe.

 window.propriedade
 window.metodo
 Métodos alert, confirm, prompt e write
Os métodos alert(), confirm(), prompt() são
usados para exibir uma caixa de diálogo pop-up
para o usuário, com o intuito de exibir ou solicitar
informações.
Esses três métodos pertencem ao
objeto window, e podem ser referenciados como:
 window.confirm
 window.alert
 window.prompt
O objeto window representa uma janela aberta no navegador,
e contém outros objetos, como por exemplo o objeto
document.
 Método alert()
Método alert()
 Usado para mostrar uma caixa de alerta (diálogo) e um
botão de OK.
 Pertence ao objeto window, que representa uma janela
aberta em um navegador.
 Método confirm()
Método confirm()
 O método confirm() é usado para mostrar uma caixa de confirmação,
com uma mensagem especificada, e botões OK e Cancelar.
 Retorna True se o usuário clicar em OK, e False se clicar em Cancelar.
 Também pertence ao objeto window.
 Método prompt()
Método prompt()
 Permite abrir uma caixa de diálogo para entrada de
dados, também possui botão ok e cancelar.
 Pertence ao objeto window

O Texto entre a
segunda aspas exibe
uma string alternativa
dentro do campo de
entrada
 Método document.write()
O Método document.write() é um método que
permite escrever texto e tags HTML em um documento.

Podem ser texto (strings) ou ainda marcações

HTML.

Resultado
 Método document.write()
O Método document.write() é um método que
permite escrever texto e tags HTML em um documento.

Podem ser texto (strings) ou ainda marcações

HTML.

Resultado
 String,
Concatenação
e Interpolação
 Strings
Em programação, a todo momento trabalhamos com dados
dos mais variados tipos, independentemente da linguagem.

Alguns exemplos são os booleanos (verdadeiro ou falso),

números (inteiros, ponto flutuante) e alguns tipos mais
complexos, como estruturas e objetos. Um dos tipos mais
utilizados em programação são as strings, sequências (ou
cadeias) de caracteres que usamos para, entre outras coisas,
manipular textos.

O que é uma String?

Por definição, strings são sequências de caracteres

alfanuméricos (letras, números e/ou símbolos) amplamente
usadas em programação. Em Javascript, uma string sempre
estará entre aspas.
 Aspas Simples, Duplas e Crase
A verdade é que para o JavaScript não faz diferença se você
declara uma String com aspas simples ou duplas, para ele as duas
maneiras são declarações válidas para uma String.
A grande competição por escolher um ou outro é puramente por
gosto particular de cada desenvolvedor, muitos preferem simples,
porém, outros preferem duplas. Claro que ambos os casos temos
vantagens e desvantagens.

Imagine que você precise escrever a seguinte String:

PAU-D'ALHO ou CAIXA D’AGUA

Se estivermos utilizando aspas simples, para ambos as frases

devemos escapar a aspa, da seguinte maneira:

Devemos adicionar uma

barra invertida ( \ ), antes da
aspa simples.
 Aspas Simples, Duplas e Crase
Veja que é um pouco chato escrever esse código, porém, se você
utilizar aspas duplas, esse escape não é necessário:

O mesmo processo é igual para quando precisar usar uma palavra

com aspas duplas.

Para evitar esse tipo de necessidade em realizar

o escape podemos usar Template String (Crase), da seguinte
maneira:
 Concatenação de Strings
Concatenar strings
Quando falamos em concatenar strings, quer dizer que vamos juntar
duas ou mais strings e formar uma nova. Observe o exemplo abaixo:

Para concatenar usamos o operador de adição (+). Também podemos

usar +=. Veja o resultado do código abaixo:
 Interpolação de Strings
Interpolar strings
Diferente da concatenação que usa o operador de adição (+),
podemos usar Tamplate String com (Crase) para criar interpolação
de strings usando Placeholders ${ } bserve o exemplo abaixo:
Variáveis e
Dados
 DECLARAÇÃO DE VARIAVEIS
Declarando variáveis

Podemos declarar uma variável local com o uso da

palavra-chave var ou let, seguida do nome que se quer
atribuir à variável:
var nome_variavel;
let nome_variavel;
Exemplos
var nome;
var num1;
var a = 20, b = 40.65, codigo = "S43X";
let x = 6.02e23;
let estado = true;
OBS: O ponto e virgula no final não é obrigatório
DECLARAÇÃO DE VARIAVEIS
Exemplo usando Var e let

20
 NOME DAS VARIAVEIS

IDENTIFICADORES

 Podem começar com letras, $ ou _

 Não podem começar com números.
 É possível usar letras ou números.
 É possível usar acentos e símbolos.
 Não podem conter espaços.
 Não podem ser palavras reservadas.
21
 DECLARAÇÃO DE VARIAVEIS

DICAS

• Maiúsculas e Minúsculas fazem

diferença.
• Tente escolher nomes coerentes para as
variáveis
• Evite se tornar um “Programador
Alfabeto” ou um “Programador Contador”
22
EXEMPLO DE DADOS PRIMITIVOS

5 16 -20
Number
0.6 -17.9 3.14 8.0
“Google”
String ‘Javascript’
`Maria`
true
Boolean
false 23
 Operadores
Aritméticos e
Atribuição
OPERADORES ARITMÉTICOS

ADIÇÃO

SUBTAÇÃO

MULTIPLICAÇÃO

DIVISÃO

RESTO DIVISÃO

RAIZ QUADRADA
 ATRIBUIÇÃO SIMPLES
Um operador de atribuição atribui um valor
ao operando à sua esquerda baseado no valor do
operando à direita. O operador de atribuição
básico é o igual (=), que atribui o valor do
operando à direita ao operando à esquerda. Isto
é, x = y atribui o valor de y a x.
ATRIBUIÇÃO COMPOSTA
 ORDEM DE PRECEDÊNCIA

Para realizarmos
()
cálculos com os
operadores **
aritméticos devemos
seguir a ordem de * / %
Precedência ao lado.
+ -
 ORDEM DE PRECEDÊNCIA
Observe no exemplo abaixo a ordem de operação
marcada com um retângulo.
parseInt e
parseFloat
 Number.parseInt() e Number.parseFloat()
parseInt() – É usado para aceitar a string e convertê-la
em um número inteiro.

parseFloat() – É usado para aceitar a string e convertê-la

em um número de ponto flutuante(Numeros com casas
decimais).
 Number.parseInt() e Number.parseFloat()
Number – Caso queira que o Javascript converta as
strings automaticamente, tanto pra números inteiros como
números com casas decimais, vc deve especificar apenas
o comando Number. Veja o exemplo abaixo:

Nota: Observe que o resultado

retornou o valor com casas
decimais sem precisar especificar
o parseFloat.
Praticando
 SOMA DE DOIS NÚMEROS
Nesse exemplo temos um script que faz a soma de dois
números usando janelas de prompt como inserção de entrada e o
resultado de saída no corpo do documento.

O resultado considera
os valores inseridos na
janela de prompt:

Num1 = 38
68
Num2 = 30
 SOMA DE DOIS NÚMEROS
Nesse outro exemplo temos um script que faz a soma de
dois números usando janelas de prompt como inserção de entrada
e o resultado de saída no corpo do documento com fixação de
casas decimais, conversão de “ponto” por “virgula” e valor em
forma de moeda do Brasil (Real).

O resultado considera
os valores inseridos na
janela de prompt:

Num1 = 10.5
15.5
Num2 = 5