Introdução à
programaçã
o com
Javascript
Daniel da Costa e Faria
Como funciona a Internet
Conexão
continental
Redes de
computadores
ligadas pelo
mundo
O serviço WWW
World Wide Web
Sistema baseado e documentos e
pastas
Todo site que nós vemos está
salvo em uma pasta, dentro de
um computador na Internet.
Páginas escritas em linguagem
Como a navegação acontece
Olá
Cliente
Olá l
x . htm
in de
ET/
G
Servidor
Como a navegação acontece
Olá
Cliente
Olá htm
l
o.
a rtig
ET/
G
Servidor
A página não existe, então
o servidor responde 404
O que é esse tal HTML??
As páginas que nós vemos nos sites são
escritas em uma linguagem chamada
HTML
Ela descreve o que teremos no
documento.
Por exemplo, teremos imagens, teremos
texto, teremos tabelas?
Então dizemos, através da linguagem,
que elementos farão parte da nossa
A linguagem HTML
Usa etiquetas escritas entre
menor que ( < ) e maior que ( > )
Exemplo de parágrafo
<p>Texto</p>
Exemplo de tabela
<table></table>
A linguagem HTML
DOM - A árvore do HTML
Um código em HTML é lido pelo
navegador como se fosse uma
árvore.
Cada elemento do código ou é
filho de outro elemento, ou pai de
outro elemento
DOM - A árvore do HTML
Editores
Visual Studio Code
Sublime Text
Vamos de
Javascript?
Daniel da Costa e Faria
O que é Javascript?
Javascript é uma linguagem de
programação leve, interpretada, que
roda nos navegadores de Internet
(Browsers)
Ela permite “dar vida” às páginas da
Internet feitas em linguagem HTML
Como ela funciona
Ela age atendendo chamadas de funções
ativadas por eventos
Eventos de mouse - click, dblclick,
mouseover, mouseout
Eventos de teclado - keyup,
keypress,keydown,keyCode
Eventos de nevegador - close
Também acessa propriedades
[Link] (largura da tela)
[Link] (cor
de fundo da tela)
[Link] = 12px
Também pode manipular o
DOM
Cria e remove elementos
Altera o conteúdo
Altera propriedades
Cria efeitos
Como usamos o Javascript
1 - Entre as tags <script> e
</script>
2 - Usando arquivo externo
<script src=”[Link]”></script>
Objetos básicos
Os principais objetos que fazem parte da
Javascript
• window - Janela do navegador
• document - Documento aberto no
navegador
• screen - Manipula a tela do usuário
• Math - Funções matemáticas
• Date - Manipula Data e hora
• Array - Armazena vários valores
Escrita básica - Mostrando
mensagens na tela
//Quando a janela terminar de carregar (load) o doc,
rode a funcao
[Link] = function()
{
//Mostro uma frase na tela
alert(‘Olá, sou seu Javascript’);
}
Escrita básica - Pedindo dados
do usuário
//Quando a janela terminar de carregar (load) o doc, rode a
funcao
[Link] = function()
{
//Declaro a variável nome
var nome;
//Guardo na variável nome o valor do objeto PROMPT
nome = [Link](‘Qual é o seu nome?’,’Digite ele aqui’);
//Exibo a mensagem Oi, junto com o valor do nome
alert(‘Oi, ’+nome);
}
Declaração de variáveis
Javascript é fracamente tipada
Isso significa que ela determina o tipo
de uma variável através do valor que
ela armazena
var nome;
nome = ‘Daniel’; //Variável tipo string
var idade = 40; //Variável tipo inteiro
Operadores
Usamos operadores para fazer a interação entre as
variáveis Existem operadores aritméticos, de
comparação, de atribuição e operadores lógicos
Manipulando o DOM
Selecionando elementos
Ex1: Pegando pelo id
<input type=”text” id=”cor”>
[Link](‘#cor’);
Ex2: Pegando pela classe
<input type=”text” class=”cor”>
[Link](‘.cor’);
