1 Introdução à Programação para WEB Gleison Medeiros Introdução ao JavaScript.
JavaScript: Introdução e Operadores (aula 1)
-
Upload
gustavo-zimmermann -
Category
Documents
-
view
497 -
download
2
description
Transcript of JavaScript: Introdução e Operadores (aula 1)
![Page 1: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/1.jpg)
Aula 1:
![Page 4: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/4.jpg)
prof. Gustavo Zimmermann | [email protected]
Uma linguagem de programação é um método
padronizado para comunicar instruções para um
computador. ”
“
JavaScript – Introdução e Operadores
Linguagens
![Page 5: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/5.jpg)
prof. Gustavo Zimmermann | [email protected]
Tipos de Linguagens
• Linguagem de Marcação ex.: HTML, XML, ...
• Linguagem de Formatação ex.: CSS
• Linguagem de Script ex.: JavaScript, ActionScript, ...
• Linguagem de Programação ex.: ASPX, JSP, PHP, Object Pascal, C#, ...
JavaScript – Introdução e Operadores
Linguagens
![Page 6: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/6.jpg)
prof. Gustavo Zimmermann | [email protected]
Linguagem de Programação
Linguagem de Script
Vs.
JavaScript – Introdução e Operadores
Linguagens
![Page 7: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/7.jpg)
prof. Gustavo Zimmermann | [email protected]
![Page 8: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/8.jpg)
prof. Gustavo Zimmermann | [email protected]
![Page 10: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/10.jpg)
prof. Gustavo Zimmermann | [email protected]
SERVER-SIDE
Client-Side
Vs.
JavaScript – Introdução e Operadores
Linguagens
![Page 11: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/11.jpg)
prof. Gustavo Zimmermann | [email protected]
Client-Side
A linguagem que o navegador
entende :)
JavaScript – Introdução e Operadores
Linguagens
![Page 12: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/12.jpg)
prof. Gustavo Zimmermann | [email protected]
Client-Side
Linguagem de Marcação
Linguagem de Formatação
Linguagem de Script
JavaScript – Introdução e Operadores
Linguagens
![Page 13: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/13.jpg)
prof. Gustavo Zimmermann | [email protected]
Server-Side
A linguagem que o navegador
NÃO entende :(
JavaScript – Introdução e Operadores
Linguagens
![Page 17: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/17.jpg)
prof. Gustavo Zimmermann | [email protected]
Client-Side
JavaScript – Introdução e Operadores
Linguagens
![Page 18: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/18.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Linguagens
Server-Side
![Page 20: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/20.jpg)
prof. Gustavo Zimmermann | [email protected]
A origem do CSS
JavaScript – Introdução e Operadores
JavaScript – o inicio
Brendan Eich
Inicialmente batizada de Mocha, posteriormente
teve seu nome mudado para LiveScript e por fim
JavaScript. LiveScript foi o nome oficial da
linguagem no lseu lançamento na versão beta do
navegador Netscape 2.0 em setembro de 1995,
mas teve seu nome mudado em um anúncio
conjunto com a Sun Microsystems em dezembro
de 1995 quando foi implementado no navegador
Netscape versão 2.0B3.
1995
![Page 21: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/21.jpg)
prof. Gustavo Zimmermann | [email protected]
JScript
JavaScript – Introdução e Operadores
JavaScript – o inicio
Bill Gates
Microsoft desenvolveu um dialeto compatível com
a linguagem de nome JScript para evitar problemas
de marca registrada. JScript adicionou novos
métodos para consertar métodos do Javascript
relacionados a data que apresentavam
problemas[carece de fontes]. JScript foi incluído no
Internet Explorer 3.0, liberado em Agosto de 1996.
1996
JScript é uma variação do JavaScript e usado em Active Server Pages. Essa linguagem de script permite a
utilização de controles ActiveX. O Internet Explorer é capaz de interpretar JScript em páginas da Web.
JScript é utilizado também na criação de scripts para Messenger Plus! Live.
![Page 22: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/22.jpg)
prof. Gustavo Zimmermann | [email protected]
Submissão
JavaScript – Introdução e Operadores
JavaScript – o inicio
Em novembro de 1996 a Netscape anunciou que tinha submetido JavaScript para Ecma
internacional como candidato a padrão industrial e o trabalho subsequente resultou na
versão padronizada chamada ECMAScript.
1996
![Page 23: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/23.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
JavaScript – o inicio
Bibliotecas Famosas
![Page 25: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/25.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Onde entra o JavaScript?
O desenvolvimento modular
01. SEMÂNTICA 02. ESTILOS
03. INTERATIVIDADE
![Page 26: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/26.jpg)
prof. Gustavo Zimmermann | [email protected]
• Manipular Conteúdo
Apresentação
Navegador
• Interagir Usuário
Formulários
Linguagens dinâmicas
JavaScript – Introdução e Operadores
Onde entra o JavaScript?
Onde entra o JavaScript?
![Page 29: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/29.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Hello World!
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<title>Olá Mundo!</title>
<script>
alert("Hello World!");
</script>
</head>
<body>
<h1>Curso de JavaScript</h1>
</body>
</html>
![Page 31: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/31.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Browsers
“JavaScript é uma linguagem de script orientada a objeto
que se destina a manipular os elementos de um Browser,
fazendo com que o usuário possa interagir com essas
páginas da web.”
![Page 32: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/32.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Browsers
Interpreta
Oferece referências aos elementos (objetos)
presentes no Browser
BROWSER
![Page 33: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/33.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Browsers
Objetos do Browser Fazendo um paralelo
Cachorro
Objeto
cor, altura, peso, raça
Atributos (no JavaScript eu chamo de propriedades)
comer( ), latir( ), dormir( )
Métodos (ações)
![Page 34: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/34.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Browsers
Objetos do Browser Fazendo um paralelo
Cachorro
Acessos
Cachorro.cor;
Cachorro.latir( );
![Page 35: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/35.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Browsers
Categorias de Objetos
• Objetos Internos string, date, number
• Objetos do Browser window, document
• Objetos Personalizados construídos pelo programador
![Page 36: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/36.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Browsers
Inspetor de Objetos
<F12>
![Page 38: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/38.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Eventos
Exemplo:
<img id="cara" onclick="alert(‘Triste');" src="images/cara_triste.jpg" />
![Page 39: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/39.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Eventos
Eventos do Mouse:
EVENTO DESCRIÇÃO
onclik O evento ocorre quando o usuário clica em um elemento.
oncontextmenu O evento ocorre quando o usuário clica com o direito em um elemento para abrir um menu de contexto.
ondblclick O evento ocorre quando o usuário clica duas vezes em um elemento.
onmousedown O evento ocorre quando o usuário pressiona um botão do mouse sobre um elemento.
onmouseenter O evento ocorre quando o ponteiro é movido para um elemento
![Page 40: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/40.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Eventos
Eventos do Mouse:
EVENTO DESCRIÇÃO
onmouseleave O evento ocorre quando um usuário move o ponteiro do mouse para fora de um elemento.
onmousemove O evento ocorre quando um usuário move o ponteiro do mouse sobre o elemento.
onmouseover O evento ocorre quando o ponteiro é movido para um elemento, ou em um de seus filhos.
onmouseout O evento ocorre quando um usuário move o ponteiro do mouse para fora de um elemento ou de um de seus filhos.
onmouseup O evento ocorre quando o usuário solta o botão do mouse sobre um elemento.
![Page 41: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/41.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Eventos
Eventos do Teclado:
EVENTO DESCRIÇÃO
onkeydown O evento ocorre quando o usuário solta uma tecla, após pressiona-la.
onkeypress O evento ocorre quando o usuário pressiona uma tecla
onkeyup O evento ocorre quando o usuário solta uma tecla.
![Page 42: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/42.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Eventos
Eventos do Formulário:
EVENTO DESCRIÇÃO
onblur O evento ocorre quando um elemento perde o foco.
onchange
O evento ocorre quando o conteúdo de um elemento de formulário, seleção, ou o estado verificado mudaram (para <input>, <keygen>, <select> e
<textarea>).
onfocus O evento ocorre quando um elemento recebe foco.
onfocusout O evento ocorre quando um elemento está prestes a perder o foco.
![Page 43: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/43.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Eventos
Eventos do Formulário:
EVENTO DESCRIÇÃO
oninput O evento ocorre quando um elemento recebe entrada do usuário.
oninvalid O evento ocorre quando um elemento é inválido.
onreset O evento ocorre quando um formulário é resetado.
onsearch O evento ocorre quando um usuário escreve algo em um campo de pesquisa (para <input = "search">).
![Page 44: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/44.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Eventos
Eventos do Formulário:
EVENTO DESCRIÇÃO
onselect O evento ocorre após o usuário seleciona algum texto (para <input> e <textarea>).
onsubmit O evento ocorre quando um formulário é enviado.
Mais eventos: <http://www.w3schools.com/jsref/dom_obj_event.asp>
![Page 46: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/46.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Objetos Personalizados
function
<script>
function sorrir(){
document.getElementById("cara").src = "images/cara_feliz.jpg";
}
</script>
![Page 48: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/48.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Variáveis
Conceito
Variável é um nome na qual pode-se atribuir um valor.
var x = 25102014; //number
var y = “Ricardo e Naidane”; //string
var z = true; //bolean
var m = casal; //object
![Page 49: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/49.jpg)
prof. Gustavo Zimmermann | [email protected]
Nomeações
Para a nomeação de referências precisamos respeitar 4 regras básicas: 1. Prestar atenção na escola e intercalação de Maiúsculas e Minúsculas;
2. Sem caracteres especiais (@#$%&*()+[]ªº°<>/\|);
3. Sem acentuação ou pontuação (“’!?¨´`^~.:;,);
4. Underlines (_) e Traços (-) ao invés de Espaço;
5. Quando se tratar de nomeação de variáveis: • É aceitável usar $ ou _ no início do nome. Ex: $idade, _idade;
• Não é aceitável usar números no inicío da nomeação . Ex: 3idade.
JavaScript – Introdução e Operadores
Variáveis
![Page 50: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/50.jpg)
prof. Gustavo Zimmermann | [email protected]
Nomeações palavras-chave JavaScript
JavaScript – Introdução e Operadores
Variáveis
break
case
catch
continue
default
delete
do
else
finaly
for
function
if
in
instanceof
new
return
switch
this
throw
try
typeof
var
vold
while
with
![Page 51: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/51.jpg)
prof. Gustavo Zimmermann | [email protected]
Nomeações palavras reservadas da especificação ECMA-262
JavaScript – Introdução e Operadores
Variáveis
abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatie
![Page 52: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/52.jpg)
prof. Gustavo Zimmermann | [email protected]
Nomeações palavras reservadas típicas dos Browsers
JavaScript – Introdução e Operadores
Variáveis
alert
array
blur
boolean
date
document
escape
eval
focus
functions
history
image
isNaN
length
location
math
name
navigator
number
object
onLoad
open
outerHeight
parent
parseFloat
regExp
status
string
![Page 54: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/54.jpg)
prof. Gustavo Zimmermann | [email protected]
Scape de String Cada caractere em uma string pode ser representado por uma sequência de escape. Uma sequência
de escape começa com uma barra invertida (\), que informa ao intérprete JavaScript que o próximo
caractere é um caractere especial.
JavaScript – Introdução e Operadores
Constantes
VALOR DO CARACTERE UNICODE| SEQUÊNCIA DE ESCAPE SIGNIFICADO CATEGORIA
\u0009 \t Tab Espaço em branco
\u000A \n Avanço de linha (nova linha) Terminador de linha
\u0020 Espaço Espaço em branco
\u0022 \" Aspas duplas (")
\u0027 \' Aspas simples (')
\u005C \\ Barra invertida (\)
\u7231 Caractere Japonês símbolo amor Caractere
![Page 55: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/55.jpg)
prof. Gustavo Zimmermann | [email protected]
Outros tipos
JavaScript – Introdução e Operadores
Constantes
var nome; //undefined
nome = null; //null
nome = 3 * “pessoas”; //NaN
nome = 1.7976931348623157e+309; // Infinity
nome = 2 + Infinity; // Infinity
![Page 56: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/56.jpg)
prof. Gustavo Zimmermann | [email protected]
Constantes ???
Variáveis que não variam!
JavaScript – Introdução e Operadores
Constantes
const HORAS_DO_DIA = 24;
Normalmente são escritas com letras maiúsculas para diferenciar das variáveis visualmente
![Page 57: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/57.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Constantes e Variáveis
1. <script>
2. //Alerta na tela
3. alert(”Constantes e Variáveis”);
4. //Declaração de Variáveis
5. var x = 5;
6. var y = 6;
7. var z = x + y;
8. /* Aqui faço a impressão dos resultados e valores iniciais */
9. alert(x);
10. alert(y); 11. alert(”A soma de x+y é igual a ”+z);
12. </script>
![Page 59: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/59.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Camadas
01. SEMÂNTICA 02. ESTILOS
03. INTERATIVIDADE
![Page 60: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/60.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Camadas
Tipos de Utilização
• Inline
• Incorporado
• Externo
![Page 61: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/61.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Camadas
Tipos de Utilização: inline
<img onclick=“alert(‘Tipo Inline’);” src=“imagem.jpg” />
![Page 62: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/62.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Camadas
Tipos de Utilização: incorporado <!DOCTYPE html>
<html lang=“pt-br”>
<head>
<title>Título da página</title>
<script>
alert(“Tipo incorporado”);
</script>
</head>
<body>
<img src=“imagem.jpg” />
</body>
</html>
![Page 63: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/63.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Camadas
Tipos de Utilização: externo
<!DOCTYPE html>
<html lang=“pt-br”>
<head>
<title>Título da página</title>
<script type=“text/javascript” src=“media/scripts/funcoes.js”></script>
</head>
<body>
<img src=“imagem.jpg” />
</body>
</html>
alert(“Tipo incorporado”);
Arquivo HTML
Arquivo JavaScript
![Page 65: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/65.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Popup Boxes
Alert Box
alert("Aula de JavaScript!");
![Page 66: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/66.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Popup Boxes
Confirme Box
var resposta = confirm("Você esta curtindo a aula?");
if (resposta == true) {
msg = "Pressionou OK = SIM";
} else {
msg = "Pressionou CANCELAR = NÃO";
}
![Page 67: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/67.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Popup Boxes
Prompt Box
var nome = prompt("Como você se chama?"); if (nome != null) {
document.getElementById("pessoa").innerHTML ="Olá " + nome + "! Como você está hoje?";
}
![Page 69: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/69.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Operadores
Operadores Matemáticos
Operador Descrição Exemplo Resultado
+ Adição x = 5 + 2 7
- Subtração x = 5 – 2 3
* Multiplicação x = 5 * 2 10
/ Divisão x = 5 / 2 2,5
% Resto da divisão x = 5 % 2 1
++ Incremento x = ++6 x = 6++ 7
-- Decremento x = --4 x = 4-- 3
*Os operadores aritméticos são utilizados para
realizar operações numéricas com os dados
utilizados pelo programa.
![Page 70: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/70.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Operadores
Operadores Matemáticos: adaptações
baxax bxxa )( )100
10( bb 6) 7) 8) 9)
a
abaxax
2
ba
2
ba
22
ba
1) 2) 3) 4) 5)
baba
*2
3
*2 ba
![Page 71: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/71.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Operadores
Operadores Matemáticos: adaptações
O custo ao consumidor de um carro novo é a soma do
custo de fábrica com a percentagem do distribuidor e dos
impostos (aplicados, primeiro os impostos sobre o custo de
fábrica, e depois a percentagem do distribuidor sobre o
resultado). Supondo que a percentagem do distribuidor seja
de 28% e os impostos 45%. Escrever um fluxograma e um
algoritmo que leia o custo de fábrica de um carro e informe
o custo ao consumidor do mesmo.
![Page 72: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/72.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Operadores
Operadores de Atribuição
Operador Exemplo Sinônimo Resultado = x = y x = y 5
+= x += y x = x + y 15
-= x -= y x = x - y 5
*= x *= y x = x * y 30
/= x /= y x = x / y 2
%= x %= y x = x % y 0
![Page 73: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/73.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Operadores
Operadores Relacionais
OPERADOR DESCRIÇÃO == Igual a
<> ou != Diferente de
=== Igual e do mesmo tipo que
!== Valor e tipos diferentes de
> Maior que
< Menor que
>= Maior ou igual a
<= Menor ou igual a
*Situações onde é necessário comparar informações para que o programa possa tomar uma decisão.
![Page 74: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/74.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Operadores
Operadores Lógicos
OPERADOR DESCRIÇÃO ! NOT Negação
&& AND Conjunção
|| OR Disjunção
* Usados para momentos onde se é necessário trabalhar com duas ou mais condições
![Page 75: JavaScript: Introdução e Operadores (aula 1)](https://reader034.fdocument.pub/reader034/viewer/2022050723/558aff52d8b42a3a268b45e3/html5/thumbnails/75.jpg)
prof. Gustavo Zimmermann | [email protected]
JavaScript – Introdução e Operadores
Operadores
Conversão de dados
var x = 12 + 4; //16
var y = "12"+4; //124
var z = "12"/4 //3
Use o parseiInt() para converter textos em números.