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

 

 

 

http://www.inf.ufpr.br/bhm15/​

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 :)  *
  • 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

 

 

 

http://www.inf.ufpr.br/bhm15/aulaJavascript/Entradas_Saidas

Listas

  • São dinâmicas (não têm tamanho fixo)
  • Se manipulam como um vetor
  • Possuem vários métodos conhecidos

 

 

http://www.inf.ufpr.br/bhm15/aulaJavascript/Listas

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
  • Podem ser relacionados a um comando javascript
  • Os eventos são indicados dentro das tags html como um atributo

 

http://www.w3schools.com/tags/ref_eventattributes.asp

  • <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.

 

http://www.inf.ufpr.br/bhm15/aulaJavascript/Eventos

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

 

 

 

 

 

 

 

http://www.inf.ufpr.br/bhm15/aulaJavascript/Tempo

<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 ;)

 

Link do slide : https://slides.com/brunomeyer/js1

Contatos:  

  • bruno.meyer@ufpr.br
  • pet@inf.urpr.br

 

Javascript Aula 1

By Bruno Henrique Meyer