Internet I
Primeiros Passos com JavaScript
Prof. Manoel Afonso
O que é JavaScript
 JavaScript é uma linguagem de programação interpretada;
 Foi originalmente implementada como parte dos navegadores web
para que scripts pudessem ser executados do lado do cliente e
interagissem com o usuário;
 JavaScript é uma linguagem de programação, então sim, finalmente
vocês podem dizer que são programadores o/
Como usar?
 Assim como tudo no HTML, JavaScript é usado com tags, mais
especificamente a tag <script>
 Abaixo temos um exemplo de como usar a tag <script> para calcular dois
números:
<script>
var result = 1 + 2;
alert(result);
</script>
Entendendo Melhor
 Variáveis (var) são elementos que usamos no código para guardar
dados, podemos guardar números, textos, e-mails, senhas, e até
mesmo fotos;
 Sempre ao final de uma linha devemos usar o “;” para indicar que
aquele código acabou;
 A tag <script> vai separada do corpo e do cabeçalho, ela é uma parte
totalmente independente do <body>
Funções
 Para executarmos determinada função usando o JavaScript precisamos fazer
functions como no exemplo a seguir:
<script>
function calcular(){
var result = 1 + 2;
alert(result);
}
</script>
Não entendi o código...
 Cada function tem um nome, e é entre chaves {} que escrevemos tudo que
acontece dentro dela, no caso usamos o exemplo para colocar o calculo;
 É no “alert()” que damos a mensagem da resposta para o usuário, existem 3
tipos de opções de mensagem no alert:
 Variável: é quando colocamos uma variável no alert, logo será informado o valor
que existe dentro daquela variável. Ex: alert(result);
 Literal: é um tipo de texto, tudo que é colocado entre “aspas” é um literal, porque
é escrito literalmente oque está ali. Ex: alert(“oi, meu nome é Manoel”);
 Concatenado: é quando se une um literal a uma variável, geralmente fazemos isso
usando o sinal de “+”, o código irá unir o valor que está na variável com o que você
escreveu no literal. Ex: alert(“oi, seu resultado é:” + result);
E como fazer para a function executar?
 A function precisa ser chamada para que algo seja executado, geralmente nós
chamamos ela ao clicar em alguma coisa, para isso temos o atributo “onclick”
que podemos colocar em um botão por exemplo:
<input type=“submit” onclick=“calcular()” value=“calcule”/>
 No caso acima temos um botão, e ao clicar nele você acaba executando o
comando que está no onclick, isso chama a function calcular() do nosso
código.
 Para chamar uma function no onclick é só colocar o nome dela.
Posso usar dados de um formulário?
 Sim, para pegar dados de um formulário precisamos criar uma variável para
receber esse dado, em seguida usamos um código onde informamos o id do
dado que queremos e pronto, temos nosso dado guardado em nossa variável:
var meunome = document.getElementById('nome').value;
 No caso acima temos a variável “meunome” que está recebendo o valor que
está dentro de um input type=“text” que tem a id=“nome”.
Exemplo de Código
Para entender...
 No código do slide anterior fizemos uma function que pegava o valor
de dois inputs e multiplicava-os, mostrando seu resultado no alert()
 No body temos o form onde estão duas caixas de texto para que o
usuário insira os números, e um botão onde está nosso onclick para
chamarmos nossa function.
 Ao clicar no botão a function se ativa, pegando os valores,
calculando, e mostrando a resposta para o usuário.
Dúvidas?
Exercício
 Crie um formulário que peça para o usuário o nome dele,
o ano em que ele nasceu e o ano atual, e então calcule
quando anos o usuário tem, ao final do calculo deve ser
informado a seguinte frase: “Fulano, você tem X anos!”
 Crie um aplicativo de FireFox OS usando este exercício.

Internet I - Aula 07 - Primeiros Passos com JavaScript

  • 1.
    Internet I Primeiros Passoscom JavaScript Prof. Manoel Afonso
  • 2.
    O que éJavaScript  JavaScript é uma linguagem de programação interpretada;  Foi originalmente implementada como parte dos navegadores web para que scripts pudessem ser executados do lado do cliente e interagissem com o usuário;  JavaScript é uma linguagem de programação, então sim, finalmente vocês podem dizer que são programadores o/
  • 3.
    Como usar?  Assimcomo tudo no HTML, JavaScript é usado com tags, mais especificamente a tag <script>  Abaixo temos um exemplo de como usar a tag <script> para calcular dois números: <script> var result = 1 + 2; alert(result); </script>
  • 4.
    Entendendo Melhor  Variáveis(var) são elementos que usamos no código para guardar dados, podemos guardar números, textos, e-mails, senhas, e até mesmo fotos;  Sempre ao final de uma linha devemos usar o “;” para indicar que aquele código acabou;  A tag <script> vai separada do corpo e do cabeçalho, ela é uma parte totalmente independente do <body>
  • 5.
    Funções  Para executarmosdeterminada função usando o JavaScript precisamos fazer functions como no exemplo a seguir: <script> function calcular(){ var result = 1 + 2; alert(result); } </script>
  • 6.
    Não entendi ocódigo...  Cada function tem um nome, e é entre chaves {} que escrevemos tudo que acontece dentro dela, no caso usamos o exemplo para colocar o calculo;  É no “alert()” que damos a mensagem da resposta para o usuário, existem 3 tipos de opções de mensagem no alert:  Variável: é quando colocamos uma variável no alert, logo será informado o valor que existe dentro daquela variável. Ex: alert(result);  Literal: é um tipo de texto, tudo que é colocado entre “aspas” é um literal, porque é escrito literalmente oque está ali. Ex: alert(“oi, meu nome é Manoel”);  Concatenado: é quando se une um literal a uma variável, geralmente fazemos isso usando o sinal de “+”, o código irá unir o valor que está na variável com o que você escreveu no literal. Ex: alert(“oi, seu resultado é:” + result);
  • 7.
    E como fazerpara a function executar?  A function precisa ser chamada para que algo seja executado, geralmente nós chamamos ela ao clicar em alguma coisa, para isso temos o atributo “onclick” que podemos colocar em um botão por exemplo: <input type=“submit” onclick=“calcular()” value=“calcule”/>  No caso acima temos um botão, e ao clicar nele você acaba executando o comando que está no onclick, isso chama a function calcular() do nosso código.  Para chamar uma function no onclick é só colocar o nome dela.
  • 8.
    Posso usar dadosde um formulário?  Sim, para pegar dados de um formulário precisamos criar uma variável para receber esse dado, em seguida usamos um código onde informamos o id do dado que queremos e pronto, temos nosso dado guardado em nossa variável: var meunome = document.getElementById('nome').value;  No caso acima temos a variável “meunome” que está recebendo o valor que está dentro de um input type=“text” que tem a id=“nome”.
  • 9.
  • 10.
    Para entender...  Nocódigo do slide anterior fizemos uma function que pegava o valor de dois inputs e multiplicava-os, mostrando seu resultado no alert()  No body temos o form onde estão duas caixas de texto para que o usuário insira os números, e um botão onde está nosso onclick para chamarmos nossa function.  Ao clicar no botão a function se ativa, pegando os valores, calculando, e mostrando a resposta para o usuário.
  • 11.
  • 12.
    Exercício  Crie umformulário que peça para o usuário o nome dele, o ano em que ele nasceu e o ano atual, e então calcule quando anos o usuário tem, ao final do calculo deve ser informado a seguinte frase: “Fulano, você tem X anos!”  Crie um aplicativo de FireFox OS usando este exercício.