1. Introdução e Sintaxe
Diego Pessoa
Apresentar os principais conceitos da linguagem Javascript referente à programação do lado cliente de uma aplicação Web
HTML é uma linguagem voltada para definir a estrutura de documentos
Não é uma linguagem de programação
Se houver qualquer necessidade de processar uma informação, esta deve ser enviada ao servidor
Pode-se usar applets Java ou plug-ins, mas isso torna a tarefa mais complexa
HTML é uma linguagem declarativa criada
para estruturar páginas de hipertexto através
de marcadores que descrevem a função de
blocos de texto.
Documentos HTML não são apenas para ler, e sim para processar
JavaScript vem a atender a duas demandas em especial:
Processamento no lado cliente
Controle do navegador
Processamento no Lado Cliente
CPF: 078.123.123-22
CPF inválido!
Dado tem que ser submetido ao servidor!
Aplicação servidora tem que testar entradas!
Estrutura (HTML)
Apresentação (CSS)
Computação
(Javascript)
É uma linguagem de programação interpretada com características de orientação a objetos
Desenvolvida pela Netscape a fim de estender as capacidades de seu browser
Permite que conteúdo executável seja incluído em páginas web
Sintaticamente semelhante a C e C++
Podemos dividir o código JavaScript em três partes:
páginas (.js)
<html>
<head>
<title>.::javascript::.</title>
</head>
<body>
<script language="javascript">
document.write("Hello World!");
</script>
</body>
</html>
a = 3;
b = 4;
c =5
d =6
a = 3; b = 4;
Comentários
Suporta estilos de C e C++
/* texto entre duas marcas */
// texto até o fim da linha
/*
isso é
um
comentário
de várias
linhas
*/
// comenta
// até o fim da linha
Declaração de variáveis
Não é necessário inicializar a variável na declaração
Nesse caso o valor é indefinido (undefined)
salario = 1000;
nome = "João";
var salario;
var nome;
var i;
var soma;
var i, soma;
var i = "olá, mundo"
var soma = 0, y = 10, x = 20;
var frase = "aspas duplas";
var frase2 = 'aspas simples';
txt = '<a href="link.html"> Link </a>';
document.write(txt);
<a href="link.html"> Link </a>
\n Quebra de Linha
\r Quebra de Linha (Carriage Return) \t Tab
\" " (em aspas duplas)
\' ' (em aspas simples)
Podem ser inteiros ou de ponto flutuante
Representações
Decimais: 1, 200, -20
Hexadecimais: 0Xffac, 0Xaa11
Javascript define os 4 operadores aritméticos:
+
-
*
/
Precedência de operadores:
document.write(4 + 5 * 2);
14
O operador + tem duas funções em Javascript:
Número + Número → Adição
String + String → Concatenação
Número + String → Concatenação
String + Número → Concatenação
var ola = 'Hello';
var mundo = 'World'
document.write(ola + ' ' + mundo + '!' );
Hello World!
y = 10
y = "nome"
var a = 9;
var b = 4;
var c = '4'
document.write( a + b + '<br>' );
document.write( a – b + '<br>' );
document.write( a – c + '<br>' );
document.write( a + c + '<br>' );
13
5
5
94
Vantagem
Simplicidade
Flexibilidade
Desvantagem
Programador tem de estar atento à utilização de cada variável
Operadores de incremento servem como expressões de atalho para realizar incrementos em variáveis
num = num + y; → num = num - y; → num = num * y; → num = num / y; → str = str + s; →
num += y;
num -= y;
num *= y;
num /= y;
str += s;
x = 1;
x += 3;
x += 'abc';
document.write(x);
4abc
Atalhos para adicionar e remover 1 ao valor de uma variável.
num = num + 1; → num += 1; → num++ ou ++num;
num = num - 1; → num -= 1; → num-- ou --num;
test=1;
document.write("Pré-incremento: "+(++test));
document.write("<br>");
document.write("Valor : " + test);
document.write("<br>");
test=1;
document.write("Pós-incremento: "+(test++));
document.write("<br>");
document.write("Valor : " + test);
Valor verdadeiro (true) ou false (false)
Geralmente obtidos através de expressões
condicionais ou funções lógicas
condicao = true;
A construção if executa um bloco de instruções caso uma expressão seja verdadeira
Sintaxe:
if( x == 8 ){
document.write("X é igual a oito.");
}
A instrução else só pode ocorrer após um bloco if.
Indica o que fazer, caso a expressão seja avaliada como falsa.
if( x == 8 ){
document.write("X é igual a oito.");
}
else {
document.write("X é diferente de oito.");
}
Parênteses são obrigatórios ao redor da expressão.
Os caracteres {} delimitando o bloco são opcionais, se este contiver apenas uma instrução
if( x == 8 )
document.write("X é igual a oito.");
else
document.write("X é diferente de oito.");
A construção else if pode servir para testar várias condições:
if( x < 8 ){
document.write("X é menor que oito.");
}
else if( x == 8){
document.write("X é igual a oito.");
} else {
document.write("X é maior que oito.");
}
? é o operador ternário
Permite expressar de forma mais concisa uma operação de decisão
Sintaxe: condição? expressão1 : expressão2
document.write(
(x == 8)?
"X é igual a 8" :
"X é diferente de 8"
);
A string ' '
null ou undefined
var a = true;
var b = false;
document.write((a && b)? 'Sim' : 'Não' );
document.write( ' <br> ' );
document.write( (a || b)? 'Sim' : 'Não' );
Não <br> Sim
switch (cor) {
case "azul":
document.write("color: blue;");
break;
case "vermelho":
document.write("color: #FF0000;");
document.write("text-decoration: line-
through;");
break;
case "preto":
document.write("color: #000000;");
break;
}
Funciona com strings, inteiros e números reais.
A instrução break, ao fim de cada caso, indica que a execução deve parar.
Se for omitida, a execução continua.
default: o que fazer se nenhuma das condições for cumprida
Funciona com strings, inteiros e números reais.
A instrução break, ao fim de cada caso, indica que a execução deve parar.
Se for omitida, a execução continua.
default: o que fazer se nenhuma das condições for cumprida
switch (acao) {
case 'preparar':
document.write("<li> Preparar </li>\n");
case 'embalar':
document.write("<li> Embalar </li>\n");
case 'enviar':
document.write("<li> Enviar</li>\n");
break;
default:
document.write("<em> Erro! </em>");
}
Loops são estruturas que permite repetir várias vezes a mesma peça de código, até que uma condição seja satisfeita
while do .. while for
A instrução while repete um bloco de instruções, enquanto a condição especificada for verdadeira
var num = 1;
while (num <= 10){
document.write(
"O número é " + num + "<br>\n"
);
num++;
}
document.write('Fim');
O número é 1 <br>
O número é 2 <br>
O número é 3 <br>
O número é 4 <br>
O número é 5 <br>
O número é 6 <br>
O número é 7 <br>
O número é 8 <br>
O número é 9 <br>
O número é 10 <br>
Fim
A instrução do .. while funciona da mesma maneira que o while, mas o bloco é executado ao menos uma vez.
var num = 11;
do {
document.write(
"O número é " + num + "<br>\n"
);
num++;
} while (num <= 10);
document.write('Fim');
O número é 11 <br>
Fim
Um bloco for define uma maneira padronizada de se especificar um loop seqüenciado
Sintaxe:
for(inicialização; condição; modificação) {
... }
for (num = 1; num <= 10; num++) {
document.write(
"O número é " + num + "<br>\n"
);
}
document.write('Fim');
Serve para interromper uma estrutura antes do momento determinado pela condição.
Pode ser usado com while, do ... while e for
for (counter = -3; counter < 10; counter++) {
if (counter == 0){
document.write("Pára tudo!");
break;
}
document.write(100 + '/' + counter + '<br>');
}
100/-3
100/-2
100/-1
Para tudo!
Interrompe apenas a iteração atual do loop, e passa para a próxima.
for (counter=-3;counter<10;counter++){
if (counter==0){
document.write("Pula o zero.<br>");
continue;
}
document.write(100 + '/' + counter + ( 100 / counter) + '<br>');
continue;
}
A função alert exibe uma caixa de mensagem simples na tela, com uma frase e um botão OK.
Sintaxe:
alert(string)
Exemplo:
alert('The book is on the table.');
A função confirm exibe uma caixa de mensagens com dois botões: OK e Cancelar.
Sintaxe:
confirm(string)
Retorna true, caso o usuário clique em OK
Retorna false, caso o usuário clique em Cancelar
if( confirm('Deseja prosseguir?') )
document.write('Bem-vindo!');
else
document.write('<a href="saida.html">Saída</a>'
);
A função prompt exibe uma caixa de mensagem que permite ao usuário digitar um texto.
Sintaxe:
prompt(string)
Retorna o texto digitado pelo usuário.ou
Retorna null, se o usuário clicar em Cancelar.
nome = prompt('Qual o seu nome?');
alert('Bem vindo, ' + nome + '!');