2. O que é o JavaScript?
O JavaScript é uma linguagem de
programação criada em 1995 por Brendan
Eich, da Netscape Navegator v2.0.
JavaScript é uma linguagem de programação
utilizada para criar pequenos programas para
realizar ações em uma página web.
3. A Web é construída por três camadas:
Conteúdo
Formatação
Comportamento
4. O JavaScript não está relacionado ao java
O JavaScript é enviado ao cliente como parte
do código HTML
É utilizado para criar efeitos especiais.
5. Estrutura básica de um script:
<SCRIPT LANGUAGE=“JavaScript”>
Instruções
</SCRIPT>
17. Conversão de Variáveis
Diferentemente das maiorias das linguagens,
o JavaScript define as variáveis
dinamicamente.
Ao atribuir uma variável, ele escolhe o tipo
conforme o valor passado para a variável,
não sendo necessário especificá-lo.
18. Conversão de Variáveis
O JavaScript entende que o que é digitado é
um string.
Para trabalhar com número é necessário fazer
a devida conversão
23. Console do navegador
Alguns navegadores dão suporte a entrada de
comandos pelo console. Por exemplo, no
Google Chrome o console pode ser acessado
por meio do atalho Control + Shift + J
Experimente executar um alert no console e
veja o resultado:
alert("interagindo como console!");
26. Tipos
O JavaScript dá suporte aos tipos
String (letras e palavras),
Number (números inteiros, decimais),
Boolean (verdadeiro ou falso) entre outros.
vartexto = "Uma String deve ser envolvida
em aspas simples ou duplas.";
varnumero = 2012;
varverdade = true;
27. Quando utilizamos o JavaScript para interagir
com os elementos da página é muito comum
obtermos coleções.
Para fazer alguma coisa com cada elemento
de uma coleção é necessário efetuar uma
iteração. A mais comum é utilizando o for:
var pessoas = ["João", "José", "Maria",
"Sebastião", "Antônio"];
for (var i = 0; i < pessoas.length; i++)
{ alert(pessoas[i]); }
28. Essa sintaxe utilizando os colchetes
em pessoas[i] é uma maneira de selecionarmos
um elemento de um Array, no caso o valor de i é
um número para cada um dos elementos da
coleção.
Para explorar o comportamento do Array você
pode realizar alguns testes com essa seleção:
var pessoas = ["João", "José", "Maria",
"Sebastião", "Antônio"];
alert(pessoas[0]); alert(pessoas[1]);
31. <script type="text/javascript">
var valor = 120;
var string = "limao";
if((valor > 100) && (string == "laranja")){
document.write("Estoque de laranja dentro do
limite");
}else{
document.write("Estoque de limao dentro do
limite");
}
34. As funções podem ser definidas como um
conjunto de instruções, agrupadas para
executar uma determinada tarefa.
Dentro de uma função pode existir uma
chamada a outra função. Para as funções
podem ser passadas informações, as quais
são chamadas de parâmetros.
35. As funções podem ou não retornar alguma
informação, o que é feito com o comando
Return.
A definição de uma função é feita da seguinte
forma:
Function NomeDaFunção([ parametro1,
parametro2, ..., parametroN ])
{
...
[Return(ValorDeRetorno)]
41. && Retorna verdadeiro se as duas condições
forem verdadeiras e falso se uma das duas
condições forem diferentes
|| Retorna verdadeiro se as pelo menos uma
das condições forem verdadeiras e falso se
nenhuma das condições verdadeiras
! Retorna verdadeiro se a opração for falsa e
vice- versa
44. Eventos
Existem diversos eventos que podem ser
utilizados para que a interação do usuário coma
página seja o ponto de disparo de funções que
alteram os elementos da própria página:
• onclick: clica com o mouse
• ondblclick: clica duas vezes com o mouse
• onmousemove: mexe o mouse
• onmousedown: aperta o botão do mouse
45. • onmouseup: solta o botão do mouse (útil com
os dois acima para gerenciar drag’n’drop)
• onkeypress: ao pressionar e soltar uma tecla
• onkeydown: ao pressionar uma tecla.
• onkeyup: ao soltar uma tecla. Mesmo acima.
• onblur: quando um elemento perde foco
46. • onfocus: quando um elemento ganha foco
• onchange: quando um input, select ou
textarea tem seu valor alterado
• onload: quando a página é carregada
• onunload: quando a página é fechada
•onsubmit: disparado antes de submeter o
formulário. Útil para realizar validações
47. Funções Temporais
Em JavaScript, podemos criar um timer para
executar um trecho de código após um certo
tempo, ou ainda executar algo de tempos em
tempos.
A função setTimeout permite que agendemos
alguma função para execução no futuro e
recebe o nome da função a ser executada e o
número de milissegundos a esperar:
// executa a minhaFuncao daqui um segundo
setTimeout(minhaFuncao, 1000);
48. Se for um código recorrente, podemos usar o
setInterval que recebe os mesmos
argumentos mas executa a função
indefinidamente de tempos em tempos:
// executa a minhaFuncao de um em um
segundo
setInterval(minhaFuncao, 1000);
50. JavaScript organiza todos os elementos de
uma Home Page dentro de uma hierarquia.
Cada elemento é visto como um objeto.
Os objetos podem ter propriedades, métodos
e responder a certos eventos. Por isso é muito
importante entender a hierarquia dos objetos
HTML.
51.
52. No exemplo acima, nós temos, um link, duas
im ag e ns, e um fo rm ulário co m do is cam po s
te xto e dois botões. Do ponto de vista do
JavaScript a janela do bro wse r é um o bje to
windo w, q ue co nté m ce rto s elementos, como
a barra de status.
53. Dentro da janela, nós podemos carregar uma
página HTML. Esta pág ina é um objeto
document.
Desta forma o objeto do cum e nt re pre se nta o
do cum e nto HTML (q ue e stá carre g ado no
m o m e nto ). O o bje to do cum e nt é m uito
im po rtante , e m JavaScript vo cê se m pre o
usará m uito . As pro prie dade s e m é to do s do
objeto do cum e nt se rão vistas
de talhadam e nte , m ais adiante .
54. Se você então precisar saber como
referenciar a primeira imagem na página
HTML, basta se g uir o caminho hierárquico.
Você deve percorrer o diagrama de cima para
baixo, o primeiro objeto é chamado document,
a primeira imagem é representada por
Imagem[0]. Desta forma nós podemos acessar
este objeto em JavaScript, da seguinte forma:
do cum e nt. Im ag e m [0 ].
55. Novamente nós seguiremos o diagrama de
hierarquia, de cima para baixo. Siga o
caminho que leva até Ele m [0 ]. To do s o s
no m e s de o bje to po r o nde você passou tem
que constar na referência ao primeiro
elemento do formulário. Desta forma você
pode acessar o primeiro elemento texto
assim: do cum e nt. Fo rm [0 ]. Ele m [0 ]
56. Mas como obteremos agora, o texto digitado?
Este elemento texto possui uma propriedade
chamada value - não se pre o cupe ag o ra, co m
pro prie dade s, m é to do s o u e ve nto s, e le s se rão
visto s detalhadamente mais adiante - esta
propriedade armazena o conteúdo do objeto,
ou seja, o texto digitado. A seguinte linha de
código obtém o texto digitado:
nome=document.forms[0].elements[0].value;
57. A string é arm az e nada na variáve l nam e . Nó s
po de m o s ag o ra trabalhar co m e sta variáve l.
Po r exemplo, nós podemos criar uma janela
po pup co m alert("Oi "+name);. Seaentradafor
"Anderson" o comando alert("Oi "+name)
abrirá uma janela popup com o texto "Oi
Anderson".