0% acharam este documento útil (0 voto)

6 visualizações

03 - JavaScript

JavaScript é uma linguagem de programação essencial para criar interatividade em páginas web, permitindo a implementação de conteúdo dinâmico. O documento aborda conceitos fundamentais de JavaScript, como funções, variáveis, e manipulação de elementos gráficos. Além disso, apresenta exemplos práticos de código para movimentação e variação de cores em elementos visuais.

Enviado por

karencondori153

Direitos autorais

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 PPTX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

6 visualizações

03 - JavaScript

Enviado por

karencondori153

Direitos autorais

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 PPTX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 26

INTRODUÇÃO À JAVASCRIPT

PROF. AMAURY
TECNOLOGIA E ROBÓTICA
O QUE É JAVASCRIPT (JS)?
• JavaScript é uma linguagem de
programação que permite a você
implementar itens complexos em
páginas web — toda vez que uma
página da web faz mais do que
simplesmente mostrar a você
informação estática — mostrando
conteúdo que se atualiza em um
intervalo de tempo, mapas interativos
ou gráficos 2D/3D animados, etc. É a
terceira camada do bolo das
tecnologias padrões da web, duas das
quais (HTML e CSS) nós falaremos com
mais detalhes.
AS CAMADAS DE BOLO
• HTML é a linguagem de marcação que nós
usamos para estruturar e dar significado para o
nosso conteúdo web. Por exemplo, definindo
parágrafos, cabeçalhos, tabelas de conteúdo, ou
inserindo imagens e vídeos na página.
• CSS é uma linguagem de regras de estilo que
nós usamos para aplicar estilo ao nosso
conteúdo HTML. Por exemplo, definindo cores de
fundo e fontes, e posicionando nosso conteúdo
em múltiplas colunas.
• Javascript é uma linguagem de programação
que permite a você criar conteúdo que se
atualiza dinamicamente, controlar multimídias,
imagens animadas, e tudo o mais que há de
interessante. Ok, não tudo, mas é maravilhoso o
que você pode efetuar com algumas linhas de
HTML
• HTML serve para dar estrutura e propósito
CSS
• CSS muda a
cor, tamanho,
localização,
parágrafos e
entre outros
detalhes
JAVASCRIPT
• Implementa o comportamento dinâmico, neste caso
abra uma janela e coloca o nome que quiser.

https://developer.mozilla.org/pt-BR/docs/Learn/JavaScript/First_steps/What_is_JavaScript
JAVASCRIPT
• https://editor.p5js.org/
CREATECANVAS, FUNCTION E DRAW
• createCanvas: é o tamanho da tela (400, 400), são as
medidas são feitas em pixels. Cada um
desses pixels é um "quadradinho" que podemos
pintar de uma cor diferente. Então, são 400 por 400
pixels.
• Dentro do createCanvas, dentro existe chamado de
“Function” (função) e essa função se chama “Setup()”
(preparo) – que é a pessoa que está criando o jogo, o
autor do jogo.
• Function draw() (desenhar) – esta função serve para
pintar
BACKGROUND
• Background (220): (fundo em
português) na cor 220;
• Quanto menor o número, zero,
por exemplo, tende ser mais
escuro, na cor preta, quanto
mais alto, como 300, tende
ser mais claro, cor branca.
• Mas conseguimos alterar as
cores que queremos, como red
(vermelho), green (verde),
white (branco) etc.
“RECT” E “FILL”
• “Rect(0, 0, 100, 150)” (abreviação
de “rectangle” ou “retângulo”)
• O que são esses números?
• (Eixo x, eixo y, tamanho
horizontal, tamanho vertical);
• Cresce da direita para baixo
• Como colorir o rect?
• Função “fill()” (preencher);
• “fill(red)” – pintamos em
vermelho.
“STROKE”
• “stroke” (traço) é a cor do
traço (contorno) do
retângulo.

• Rect(100, 250, 100, 150) –

O que acontece?
VARIÁVEL “MOUSE”
• A variável “mouse” e
depois o eixo “x”
(horizontal) e “y” (vertical);
• Acompanha o movimento
sobre o mouse sobre a tela,
tudo isso por conta da
função “draw”

• Rect(mouseX, mouseY, 20,

35)
MÉTODO “CONSOLE.LOG()”
• Desenhar a figura geométrica
somente quando o mouse
estiver pressionado;
• Para isso deve acrescentar a
variável “mouseIsPressed”
• console.log(mouseIsPressed);
• Se o mouse estiver
pressionado aparecerá a
mensagem “true”, caso
contrário “false”
MÉTODO “CONSOLE.LOG()”
• Quando é colocado o
símbolo “//” antes de
“console.log” as
mensagens “true” e “false”
desaparecem.
• Ou seja, eles desaparece e
a linha fica “ignorada”
CONDIÇÃO “IF” E “ELSE”
• “if” (se somente se), neste
comando, o retângulo só
aparece quando o mouse é
pressionado, mas desaparece
quando é solto o botão;
• Por que?
• Quando a função “draw()” é
chamada, estamos pintando
o “background” de branco:
background (“white”)
PROGRAMAÇÃO
ATENÇÃO
• Se esquecermos qualquer coisa como “”, “{}”, a
vírgula, colocar espaço, acentuação e etc, o código vai
dar erro!
• Precisa abrir e fechar as chaves, conforme as imagens
anteriores, da mesma forma o “entre parênteses”;
• Os nomes das variáveis, dos valores, dos métodos e de
tudo que ainda vamos ver não possuem espaço.
• “Nome do Aluno” se escreve “NomedoAluno”, pois se
colocar espaço, vai procurar pelo “Nome” e não
“NomedoAluno”
“CIRCLE” “COR”
• Como queremos que varie
• “circle(200, 200, 50)” (círculo), ao rodar um código, ao
os dois primeiros números é a
invés de usar “red”,
posição e o terceiro, o raio;
definiremos uma cor;
• “red” é uma palavra e cor,
VARIÁVEL “LET” não, por ser uma variável.
• É uma variável local no • Ao rodar “let cor”, a cor
escopo de um bloco, não estará definida, para
opcionalmente ser um valor, determinar um valor,
expressão, instrução ou basta colocar: cor = “red”
qualquer identificador válido;
DEFINIÇÃO “COLOR”
• As cores podem ser definidas por
números;
• Para definir vermelho, verde e azul,
usamos o “color” considerando que
os valores precisam estar entre 0 e
255 (256 valores). Exemplo:
• cor = color(255, 0, 0) o círculo se
mantém na cor vermelha;
• cor = color(10, 250, 0) verde;
• cor = color(10, 250, 250) azul claro;
• cor = color(210, 0, 250) roxo
VARIAÇÃO DE CORES – “RANDOM”
• Como queremos a variação
de cores, usamos o
“randow” (aletório) e
definindo entre (0, 255),
para isso inserimos esse
código dentro de “color”;
• Desta forma, várias cores
estarão a mostra quando
for dar o play.
• Desta forma, teremos
diversas cores para os três
MOVIMENTOS - POSIÇÃO
• Aqui estaremos
movimentando o círculo nas
posições que os variam;
• Assim como as cores,
podemos definir a posição
horizontal “let
posicaoHorizontal” e a
vertical “let posicao“ ou “let
x” e “let y”;
• Definiremos
“posicaoHorizontal = 200”
e “posicaoVertical = 200”
MOUSEX: MOVIMENTO PARA ESQUERDA
• Para que o mouse movimenta, de forma horizontal, da
direita e para a esquerda, existe o “mouseX”:
• Se o mouse for menor que a posição horizontal,
significa que o mouse está para esquerda
• “if(mouseX < posicaoHorizontal)”, se estiver na
posição, podemos diminuir a posição horizontal:
• if(mouseX < posicaoHorizontal - 1)
MOUSEX: MOVIMENTOS PARA DIREITA
• Se o mouse for maior que a posição horizontal,
significa que o mouse está para direita
• “if(mouseX > posicaoHorizontal)”, se estiver na
posição, podemos diminuir a posição horizontal:
• if(mouseX > posicaoHorizontal + 1)
MOUSEY: MOVIMENTOS VERTICAIS
• Para definir para cima,
faremos:
• if(mouseY < posicaoVertical)
• posicaoVertical = --
• Para baixo:
• if(mousey > posicaoVertical)
• posicaoVertical = ++
CÓDIGO DE MOVIMENTAÇÃO DE COR E POSIÇÃO
CÓDIGOS JAVASCRIPT
let cor;let posicaoHorizontal;let posicaoVertical; function setup()
{ createCanvas(400, 400); background(color(100, 0, 0)); cor =
"color(random(0, 255), random(0, 255), random(0,255))";
posicaoHorizontal = 200; posicaoVertical = 200; } function draw() {
fill(cor); circle(posicaoHorizontal, posicaoVertical, 50); if(mouseX <
posicaoHorizontal) { posicaoHorizontal = posicaoHorizontal - 1; }
if(mouseX > posicaoHorizontal) { posicaoHorizontal = posicaoHorizontal +
1; }if(mouseY < posicaoVertical) { posicaoVertical--;} if(mouseY >
posicaoVertical) { posicaoVertical++; if(mouseIsPressed) { cor =
color(random(0, 255), random(0, 255), random(0,255), random(0,
100)); }}}

03 - JavaScript

Enviado por

03 - JavaScript

Enviado por

INTRODUÇÃO À JAVASCRIPT

• Rect(100, 250, 100, 150) –

• Rect(mouseX, mouseY, 20,

Você também pode gostar