Scribd
Carregar
35 visualizações

JavaScript (Aula 01) - Introdução

O documento fornece uma introdução sobre JavaScript, incluindo: 1) JavaScript é uma linguagem de programação client-side criada em 1995 para controlar HTML e CSS; 2) Embora seu nome seja semelhante, JavaScript e Java são linguagens diferentes; 3) JavaScript foi padronizado pela ECMA e recebeu o nome ECMAScript.

Enviado por

Emanuelly Vitoria
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
35 visualizações

JavaScript (Aula 01) - Introdução

O documento fornece uma introdução sobre JavaScript, incluindo: 1) JavaScript é uma linguagem de programação client-side criada em 1995 para controlar HTML e CSS; 2) Embora seu nome seja semelhante, JavaScript e Java são linguagens diferentes; 3) JavaScript foi padronizado pela ECMA e recebeu o nome ECMAScript.

Enviado por

Emanuelly Vitoria
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
Você está na página 1/ 20

JAVASCRIPT

Aula 01 - Introdução
JavaScript
• Linguagem de programação client-side, criada em 1995
por Brendan Eich. Leve, gratuita, interpretada, orientada
a objetos, a “linguagem de script da Internet”.
• Diferente do que muitos pensam, as linguagens JavaScript
e Java são totalmente diferentes. O nome surgiu numa
jogada de marketing, diante da fama da linguagem Java.
• Controla o HTML e o CSS e manipula comportamentos em
páginas web, incluindo em páginas estáticas, elementos
dinâmicos (mapas, formulários, operações numéricas,
animações, infográficos interativos) e outros efeitos.
Em 1996, o JavaScript se uniu à ECMA (Associação
Europeia dos Fabricantes de Computadores), desenvolve os
padrões para hardware de computadores, comunicações e
linguagens de programação. Com essa junção, foi criado um
novo padrão de linguagem, que foi batizado com a união das
palavras "ECMA" e "JavaScript", resultando no nome
"ECMAScript". As duas tecnologias passaram a andar juntas.
ECMAScript é o nome oficial da tecnologia, mas o nome
JavaScript se tornou popular entre sua a comunidade de
desenvolvedores. ECMAScript é a especificação, e JavaScript é
uma implementação por parte dos navegadores. Com a
padronização, os criadores de navegadores devem seguir regras
que indicam como o ECMAScript (ou JavaScript) deve funcionar.
JavaScript
• Você não precisa obter ou baixar o JavaScript, pois o
mesmo é executado no navegador do computador,
tablet ou smartphone.
• No HTML, o código JavaScript é inserido entre as tags
<script> e </script>. Os scripts podem ser colocados
no <body>, no <head> ou em ambos.

• Códigos JS também podem ser colocados em arquivos


externos (de modo semelhante ao CSS), com a extensão
.js e serem chamados na tag <script>.
<script src="myScript.js"></script>
Comandos de Saída
innerHTML
Para acessar um elemento HTML, o JavaScript
pode usar o document.getElementById(id).
NO NAVEGADOR
<body> "Olá, Mundo!" SERÁ INSERIDO NO
<p id="texto"></p> ELEMENTO <p>, QUE POSSUI O ID "texto".
<script>
document.getElementById("texto").innerHTML = "Olá, Mundo!";
</script>
</body>
atributo id: Define o elemento HTML.
propriedade innerHTML: Define o conteúdo HTML.
ALTERAR A PROPRIEDADE innerHTML DE UM ELEMENTO
É UMA MANEIRA COMUM DE EXIBIR DADOS EM HTML.
Comandos de Saída
document.write()
document.write() é um comando que só deve ser usado em testes.

<body>
<p id="texto"></p>
NO NAVEGADOR
<script> document.write VAI
document.write(10+10); EXIBIR A SOMA DE 10 + 10
</script>

<button type="button" onclick="document.write('03 de Março')">


Data </button>

</body> NO NAVEGADOR
QUANDO O BOTÃO FOR CLICADO, A PÁGINA
VAI RECARREGAR E EXIBIR 03 de Março
Comandos de Saída Exibe dados em uma
janela do navegador.
window.alert()
<meta charset="UTF-8"> NO NAVEGADOR
1º Ex: EXIBE O RESULTADO
<title>Aula de JS</title> DA SOMA 9 + 9
<head>
2º Ex: EXIBE APENAS O
<script> TEXTO QUE FOI PASSADO
window.alert(9 + 9);
3º Ex: EXIBE O RESULTADO
window.alert("Programando JS"); DA MULTIPLICAÇÃO 8 * 5
window.alert(8 * 5);
alert("45 + 32"); 4º Ex: EXIBE 45 + 32,
COMO TEXTO, SEM SOMAR
alert("Aprendendo JavaScript");
alert(14 > 10); 5º Ex: EXIBE APENAS O
TEXTO QUE FOI PASSADO
</script>
</head> 6º Ex: EXIBE O RESULTADO
O USO DA PALAVRA WINDOW É DA EXPRESSÃO 14 > 10
<body> OPCIONAL, POIS FAZ UMA REFERÊNCIA (TRUE OU FALSE).
DIRETA A JANELA DO NAVEGADOR.
Características da Linguagem
▪ Case Sensitive: Diferencia maiúsculas de minúsculas.
▪ Adicione ponto e vírgula ao fim de cada instrução.
▪ Espaços em branco no código são ignorados.
▪ Se uma instrução JavaScript não couber em uma linha,
o melhor lugar para interrompê-la é após um operador.

document.getElementById("exemplo").innerHTML =
"Meu Código JavaScript!";

▪ Para inserir comentários no código, utilize: // (única linha) ou


/* */ (várias linhas). Comentários são ignorados na execução.
Declaração de Variáveis
As variáveis ​(contêineres para armazenar valores de dados)
são declaradas utilizando palavras chaves: var, let ou const.
var a = 5; let a = 5; VARIÁVEIS RECEBEM NOMES
EXCLUSIVOS, CHAMADOS
var b = 6; let b = 6; DE IDENTIFICADORES.
var res = a + b; let res = a + b; Podem conter letras, dígitos,
sublinhados e cifrões.

var foi exclusivamente no JavaScript de 1995 a 2015, Devem começar com uma
quando surgiu let e const. Se o código for executado letra, nunca com números
em navegadores mais antigos, deve-se usar var. Também podem
começar com $ e _

const n1 = 5; const são valores Diferenciam maiúsculas


de minúsculas.
constantes que
const n2 = 6; não podem ser Palavras reservadas do
JS não podem ser usadas.
let total = n1 + n2; alterados.
Concatenação
<body> O sinal de + é ser usado
<p id="nome"></p> para concatenar (juntar)
<p id="soma"></p>
variáveis e textos.
<script>
nome = "Rafael";
document.getElementById("nome").innerHTML = "Nome: " + nome;
NO NAVEGADOR
let n1 = 12; Nome: Rafael
let n2 = 14;
soma = n1 + n2;
document.getElementById("soma").innerHTML =
"O resultado da soma entre " + n1 + " + " + n2 + " é " + soma;
</script> NO NAVEGADOR
O resultado da soma entre 12 + 14 é 26
</body>
Tipos de Dados
▪ String: Armazena series de caracteres, que devem
ser escritos com aspas (simples ou duplas).
▪ Number: Todos os números são armazenados
como decimais (ponto flutuante).
▪ BigInt: Armazena valores inteiros grandes demais para
serem representados pelo number. Não recebe valores
decimais e não realiza cálculos com o tipo Number.
▪ Boolean: Podem ter apenas dois valores: true ou false.
Existem ainda outros tipos de dados em JS:
Undefined, Null, Symbol, Object
JavaScript tem tipos dinâmicos. O tipo de dados não
precisa ser declarado, pois é reconhecido pelo JS.

STRINGS BIGINT
let cor = "Verde"; Para utilizar o BigInt, podemos incluir n ao final de
um inteiro ou utilizar o comando BigInt():
let nome = "Rafael";
let x = 1234567890123456789012345n;
BOOLEAN let y = BigInt(1234567890123456789012345);
let x = true; Inteiros são precisos até 15 dígitos.
let y = false; O número máximo de casas decimais é 17.

NUMBER
Diferente de outras linguagens, JS não
let n1 = 89;
tem tipos diferentes para inteiros, de
let n2 = 9.5;
ponto flutuante ou notação decimal.
let n3 = 789e5;
Tipos de Dados
Todos os números são armazenados como decimais (ponto
flutuante) e podem ser escritos com ou sem casas decimais.

let valor1 = 34.00;


let valor2 = 34;
Números extragrandes ou extrapequenos podem
ser escritos com notação científica (exponencial).

let v1 = 789e5;
NO NAVEGADOR
document.write(v1 + "<br>"); 78900000
let v2 = 789e-5; 0.00789
document.write(v2 + "<br>");
Tipos de Dados
Adicionando um número e uma string,
o Java Script tratará o número como string.
O JavaScript
let a = 10 + "Etec"; vai tratar como: let a = "10" + "Etec";

O JS avalia expressões da esquerda para a direita.


Dependendo da sequência, as saídas são diferentes.

let x = 16 + 4 + "Leonardo"; NO NAVEGADOR


document.write(x); 20Leonardo
Trata 16 e 4 como números, até chegar no texto.

let x = "Leonardo" + 16 + 4; NO NAVEGADOR


document.write(x); Leonardo164
Como o primeiro operando é uma string,
o JS assume que todos os outros são strings.
OPERADORES ARITMÉTICOS
+ Adição n1 + n2
- Subtração n1 - n2
* Multiplicação n2 * n1
** Exponenciação n2 ** n1
/ Divisão n1 / n2
% Resto da Divisão (Módulo) n1 % n2
++ Incremento n1++
-- Decremento n2++
OPERADORES DE ATRIBUIÇÃO
= Atribui Valor a = 10 a=b
+= Somar e Atribuir a=a+b a += b
-= Subtrair e Atribuir a=a-b a -= b
*= Multiplicar e Atribuir a = a * b a *= b
/= Dividir e Atribuir a=a/b a /= b
%= Resto e Atribuição a=a%b a %= b
**= Potência e Atribuição a = a ** b a**= b
OPERADORES DE COMPARAÇÃO
== Igual
=== Valor e Tipo Iguais
!= Diferente
!== Valor ou Tipo Diferente
> Maior que
< Menor que
>= Maior ou Igual a
<= Menor ou Igual a
OPERADORES LÓGICOS
&& AND (E) a && b
TRUE se tanto a quanto
b forem verdadeiros.
|| OR (OU) a || b
TRUE se um deles, seja a ou
seja b, forem verdadeiros.
TABELA VERDADE

AND (E) OR (OU)


X Y X && Y X Y X || Y
V V V V V V
V F F V F V
F V F F V V
F F F F F F
Fontes Consultadas
https://pt.theastrologypage.com/scripting-language
https://www.treinaweb.com.br/blog/qual-a-diferenca-
entre-ecmascript-e-javascript
https://developer.mozilla.org/pt-BR/docs/Glossary/ECMA
https://universeofprogramming.wordpress.com/2020/06
/17/an-brief-introduction-to-ecmascript/
https://hcode.com.br/blog/o-que-e-ecmascript-e-o-
mesmo-que-javascript
https://www.w3schools.com/js/default.asp
Material desenvolvido pelo
Prof. Rafael da Silva Polato
[email protected]

Divisão de Turma
Prof. Rodrigo Martins
[email protected]

Você também pode gostar