JavaScript
Oficina 1
O que é?
- Linguagem de programação
- Interpretada
- Interação com o usuário(client-side)
- Compilada em tempo de execução
- Não parece com Java
- Parece com a linguagem C
- Orientado a objetos
Por que usar?
- Usado para manipular HTML
- Pode interagir visualmente com o usuário
- Maior controle de como sua página é apresentada
- Fácil de aprender
- Grande suporte na internet
- Eventualmente alguém já teve o mesmo problema que você possa encontrar
- Muitas(muitas mesmo!) bibliotecas
Objetivos do curso
- Aplicação web(superficialmente)
- Não é possível aprender tudo
- Base para aprender por conta própria
- Limites, problemas e utilidades da linguagem
Como começar?
No seu código HTML
- Crie uma tag com o nome script
- Pode ser dentro do HEAD ou no final do BODY
- Dentro da tag digite seu código
- Ou referencie um arquivo javascript através do atributo src da tag <script>
<html>
<head>
<script>
//MEU CODIGO
<script>
<script src="meuScript.js"> </script>
</head>
<body>
<script src="meuScript2.js"></script>
</body>
</html>Peculiaridades
- Não há necessidade de declarar tipos de variáveis
- Para declarar uma variável use : "var nomeVariavel = valor;"
- É possível ignorar o "var" e tornar a variável global
- Não é possível passar uma variável por referência numa função
- Para contornar esse problema, passa-se como parâmetro da função um objeto que contém aquela variável
- * CALMA! Mais pra frente a gente vê isso :) *
- Para contornar esse problema, passa-se como parâmetro da função um objeto que contém aquela variável
- Uma variável pode "mudar" seu tipo a qualquer momento
- Não precisa usar ";"
Entradas e Saídas
- prompt("mensagem") : Retorna o valor digitado
- alert("mensagem") : Transmite uma mensagem ao usuário
- console.log("mensagem") : Imprime uma mensagem no console do browser
Listas
- São dinâmicas (não têm tamanho fixo)
- Se manipulam como um vetor
- Possuem vários métodos conhecidos
Objetos
-
Objetos são variáveis que guardam outras variáveis, funções e estruturas dentro de si
-
Em alguns casos há necessidade de declarar
-
Para setar um atributo:
-
-
Uma visão superficial...
var objeto = {};
var objeto = [];objeto.novoAtributo = valor;
objeto.novoAtributo = function f(){};Eventos
O que são?
- São sinais emitidos quando o usuário executa determinada ação
- Exemplos:
- Quando a página é carregada
- Quando o mouse passa em sima de uma tag
- etc
- Exemplos:
- Podem ser relacionados a um comando javascript
- Os eventos são indicados dentro das tags html como um atributo
- <tag onmouseover="alert('oi');"> </tag>
- Quando o mouse passa em cima desta tag
- <tag onClick="minhaFuncao();"> </tag>
- Quando a tag é clicada
Repare que o comando está dentro de uma string.
Manipulação HTML
Relembrando
Tags html possuem vários atributos, o estilo css (style) é um deles.
<html>
<body>
<div style="background-color=rgb(150,150,255)">
<button id="botao"> BOTAO </button>
<input type="text" value="Digite alguma coisa">
</div>
</body>
</html>- variavel = document.getElementById("id");
- Busca uma tag com id="id" e a vincula com uma variável
- Todos os atributos da tag podem ser acessados e/ou modificados
- lista = document.getElementsByClassName("classe");
- lista agora é uma lista de todos os objetos do documento html que tem como classe o nome da classe especificada
http://www.inf.ufpr.br/bhm15/aulaJavascript/Manipulacao_html
<script>
document.getElementById("botao").style.width = "500px";
<script>Tempo
-
setInterval("comando;",1000);
- Executa um comando a cada 1000 milisegundos(1 segundo)
-
setTimeout("comando",1000);
- Executa um comando depois de 1000 milisegundos
<script>
movimenta = setInterval("funcaoMovimenta();",10);
document.getElementById("bloco").style.position = "relative";
function funcaoMovimenta(){
var estiloObj = document.getElementById("bloco").style;
estiloObj.left += 10;
if(estiloObj.left >= 200)
clearInterval(movimenta);
}
</script>Obrigado!
Até a próxima aula ;)