Internet I - Aula 07 - Primeiros Passos com JavaScript
12
Internet I Primeiros Passos com JavaScript Prof. Manoel Afonso
-
Upload
manoel-afonso -
Category
Mobile
-
view
145 -
download
1
Transcript of Internet I - Aula 07 - Primeiros Passos com JavaScript
Internet IPrimeiros 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.
