JAVASCRIPT

1. Introdução e Sintaxe

Diego Pessoa

Objetivos

Apresentar os principais conceitos da linguagem Javascript referente à programação do lado cliente de uma aplicação Web

Introdução

HTML é uma linguagem voltada para definir a estrutura de documentos

Não é uma linguagem de programação

Se houver qualquer necessidade de processar uma informação, esta deve ser enviada ao servidor
Pode-se usar applets Java ou plug-ins, mas isso torna a tarefa mais complexa

Introdução

HTML é uma linguagem voltada para definir a estrutura de documentos (cont.)
- Não é uma linguagem de formatação (completa)
- A aparência dos documentos não pode ser completamente controlada.
- Necessidade de uma linguagem complementar: Folhas de Estilo (CSS)

Introdução

HTML é uma linguagem declarativa criada

para estruturar páginas de hipertexto através

de marcadores que descrevem a função de

blocos de texto.
- Documentos HTML não são apenas para ler, e sim para processar

Limitações do HTML

JavaScript vem a atender a duas demandas em especial:
- Processamento no lado cliente
- Controle do navegador

Limitações do HTML

Processamento no Lado Cliente

CPF: 078.123.123-22

CPF inválido!

Dado tem que ser submetido ao servidor!

Aplicação servidora tem que testar entradas!

limitações do html

Processamento no Lado Cliente
- Dados incorretos não precisam ser passados ao servidor
  - Diminuição de tráfego
Aplicação concentra-se em seu objetivo principal
- Foco na solução

Controle da Aplicação
- Monitorar carga e descarga de documentos
- Alterar propriedades conforme necessário Acessar propriedades do browser

Relação entre tecnologias

Estrutura (HTML)

Apresentação (CSS)

Computação
(Javascript)

Javascript

É uma linguagem de programação interpretada com características de orientação a objetos

Desenvolvida pela Netscape a fim de estender as capacidades de seu browser

Permite que conteúdo executável seja incluído em páginas web

Sintaticamente semelhante a C e C++

Javascript != Java

Java é uma linguagem orientada a objetos desenvolvida pela Sun Microsystems com um escopo bastante amplo (não necessariamente ligado à web)
O nome JavaScript foi escolhido por mera questão de marketing...
Seu nome ia ser LiveScript

DOM

Combina as características de uma linguagem de script com o Modelo de Objetos de Documentos
- DOM : Document Object Model
Define uma hierarquia de objetos que são baseados no conteúdo de uma página web:
Formulários, Imagens, Elementos de Bloco, etc.

destaques da linguagem

Controlar a aparência e conteúdo do documento
- Escrever código em documento enquanto ele está sendo interpretado pelo browser
Controlar o browser
- Abrir novas janelas, exibir mensagens na barra de status, etc.
Manipular formulários HTML

código javascript

Podemos dividir o código JavaScript em três partes:

Código comum
- Realiza qualquer tarefa
Manipulação de eventos
- Funções devem ser chamadas para manipular os eventos
Manipulação do Browser
- O browser é tratado como uma hierarquiade objetos

código javascript

Blocos <script>
- Usado para definir funções que serão usadas dentro da mesma página, gerar HTML
Arquivos externos
- Definir funções que serão usadas por várias
  páginas (.js)

Junto à tags HTML
- Manipulação de eventos

código javascript

<html>
<head>
<title>.::javascript::.</title>
</head>
<body>
<script language="javascript">
document.write("Hello World!");
</script>
</body>
</html>

Sintaxe e estrutura

Estrutura Léxica
- Case Sensitive
  - Valor, VALOR e VaLOR são variáveis diferentes
- Na maior parte dos casos, Javascript ignora espaços em branco.
  - Inclusive tabulações e quebras de linha

Sintaxe e estrutura

Ponto e vírgula opcional
- Inserido automaticamente

a = 3;
b = 4;
c =5
d =6
a = 3; b = 4;

Sintaxe e estrutura

Comentários
Suporta estilos de C e C++
- /* texto entre duas marcas */
- // texto até o fim da linha

/*
isso é
um
comentário
de várias
linhas
*/

// comenta
// até o fim da linha

Sintaxe e estrutura

Declaração de variáveis
- Não é necessário inicializar a variável na declaração
- Nesse caso o valor é indefinido (undefined)

Tipos de dados e literais

Tipos Primitivos
- string
- number
- boolean
- undefined
- null

Tipos de dados

Os tipos de dados em Javascript são implícitos
- Interpretador faz tudo automaticamente
Strings → "Texto de uma string"
Números → 15, 15.6, 18.23e10
Arrays e tipos complexos

variáveis

Uma variável associa um nome a um valor na memória do computador.
Javascript permite declarações explícitas ouimplícitas de variáveis.

variáveis

Declaração implícita
- Atribui-se um valor a um identificador cujo nome não seja uma palavra reservada

salario = 1000;
nome = "João";

Declaração explícita
- Usa-se a palavra reservada var para definir que o identificador a seguir é uma variável

var salario;
var nome;

variáveis

Declaração de variáveis

var i;
var soma;
var i, soma;
var i = "olá, mundo"
var soma = 0, y = 10, x = 20;

Strings

Literais entre aspas simples (‘ e ’) ou duplas (“ e ”)

var frase = "aspas duplas";
var frase2 = 'aspas simples';

Combinações de aspas simples e duplas facilitam a mesclagem de código HTML e Javascript

txt = '<a href="link.html"> Link </a>';
document.write(txt);

<a href="link.html"> Link </a>

Strings

Strings podem ter caracteres especiais:

\n Quebra de Linha
\r Quebra de Linha (Carriage Return) \t Tab
\" " (em aspas duplas)
\' ' (em aspas simples)

números

Podem ser inteiros ou de ponto flutuante
Representações
- Decimais: 1, 200, -20
- Hexadecimais: 0Xffac, 0Xaa11
Javascript define os 4 operadores aritméticos:
- +
- -
- *
- /

números

Precedência de operadores:

document.write(4 + 5 * 2);

operador de concatenação

O operador + tem duas funções em Javascript:
Número + Número → Adiçã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!

conversão de tipos

Em JavaScript, os tipos das variáveis são implícitos
- O tipo da variável depende do valor assumido naquele instante

A conversão de tipos é automática e transparente ao usuário
- Não existe casting

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

conversão de tipos

Vantagem
- Simplicidade
- Flexibilidade
Desvantagem
- Programador tem de estar atento à utilização de cada variável

operadores de incremento

Operadores de incremento servem como expressões de atalho para realizar incrementos em variá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

auto-incremento

Atalhos para adicionar e remover 1 ao valor de uma variá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);

booleano

Valor verdadeiro (true) ou false (false)
- Geralmente obtidos através de expressões
  
  condicionais ou funções lógicas

condicao = true;

null e undefined

Javascript define dois valores especiais relacionados:
- null → Nenhum valor
- undefined → Valor não definido (padrão na declaração)

condicional if

A construção if executa um bloco de instruções caso uma expressão seja verdadeira

Sintaxe:

if( x == 8 ){
  document.write("X é igual a oito.");
}

instrução else

A instrução else só pode ocorrer após um bloco if.
Indica o que fazer, caso a expressão seja avaliada como falsa.

if( x == 8 ){
  document.write("X é igual a oito.");
}
else {
  document.write("X é diferente de oito."); 
}

bloco if-else

Parênteses são obrigatórios ao redor da expressão.
Os caracteres {} delimitando o bloco são opcionais, se este contiver apenas uma instrução

if( x == 8 )
  document.write("X é igual a oito.");
else
  document.write("X é diferente de oito.");

else if

A construção else if pode servir para testar várias condiçõ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.");
}

operador ?

? é o operador ternário
Permite expressar de forma mais concisa uma operação de decisão
Sintaxe: condição? expressão1 : expressão2

document.write(
     (x == 8)?
     "X é igual a 8" :
     "X é diferente de 8"
);

expressões booleanas

Uma expressão boolena pode ter dois valores:
- Verdadeiro (true)
- False (false)
Em Javascript, todas as expressões podem ser avaliadas como booleanas
Quase todas as expressões são avaliadas como verdadeiras, exceto se seu resultado for:
- O inteiro 0
- O número real 0.0
- A string ' '
- null ou undefined

Operadores booleanos

Operadores booleanos permitem construir expressões booleanas complexas
- && (e)
- || (ou)
- ! (não)

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-case

Compara uma expressão a vários valores

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

switch-case

Funciona com strings, inteiros e números reais.
A instrução break, ao fim de cada caso, indica que a execução deve parar.
- Se for omitida, a execução continua.
default: o que fazer se nenhuma das condições for cumprida

switch-case

Funciona com strings, inteiros e números reais.
A instrução break, ao fim de cada caso, indica que a execução deve parar.
- Se for omitida, a execução continua.
default: o que fazer se nenhuma das condiçõ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

Loops são estruturas que permite repetir várias vezes a mesma peça de código, até que uma condição seja satisfeita
```
  while
  do .. while
  for
```

while

A instrução while repete um bloco de instruções, enquanto a condiçã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

do... while

A instrução do .. while funciona da mesma maneira que o while, mas o bloco é 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

for

Um bloco for define uma maneira padronizada de se especificar um loop seqüenciado

Sintaxe:
```
 for(inicialização; condição; modificação)
 {
```
... }

for (num = 1; num <= 10; num++) {
    document.write(
     "O número é " + num + "<br>\n"
    );
}
document.write('Fim');

BREAK

Serve para interromper uma estrutura antes do momento determinado pela condiçã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!

CONTINUE

Interrompe apenas a iteração atual do loop, e passa para a pró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;
}

CAIXAS DE MENSAGEM

Javascript permite a comunicação com o usuário através de caixas de mensagem abertas pelo navegador.
Caixas de mensagem:
- Simples de implementar.
- Poucas opções de personalização.
- Interrupção do usuário.

ALERT

A função alert exibe uma caixa de mensagem simples na tela, com uma frase e um botão OK.
Sintaxe:
- alert(string)
Exemplo:
O título da janela se refere ao site em que o Javascript foi executado.
Não é possível modificar o título.

alert('The book is on the table.');

confirm

A função confirm exibe uma caixa de mensagens com dois botões: OK e Cancelar.
Sintaxe:
- ```
confirm(string)
```
- Retorna true, caso o usuário clique em OK
- Retorna false, caso o usuário clique em Cancelar

if( confirm('Deseja prosseguir?') )
  document.write('Bem-vindo!');
else
  document.write('<a href="saida.html">Saída</a>'
);

prompt

A função prompt exibe uma caixa de mensagem que permite ao usuário digitar um texto.

Sintaxe:
prompt(string)
- Retorna o texto digitado pelo usuário.ou
- Retorna null, se o usuário clicar em Cancelar.

nome = prompt('Qual o seu nome?');
alert('Bem vindo, ' + nome + '!');

Javascript - Introdução e Sintaxe

By diegoep

Javascript - Introdução e Sintaxe

JAVASCRIPT

Objetivos

Introdução

Introdução

Introdução

Limitações do HTML

Limitações do HTML

limitações do html

Relação entre tecnologias

Javascript

Javascript != Java

DOM

destaques da linguagem

código javascript

código javascript

código javascript

Sintaxe e estrutura

Sintaxe e estrutura

Sintaxe e estrutura

Sintaxe e estrutura

Tipos de dados e literais

Tipos de dados

variáveis

variáveis

variáveis

Strings

Strings

números

números

operador de concatenação

conversão de tipos

conversão de tipos

operadores de incremento

auto-incremento

booleano

null e undefined

condicional if

instrução else

bloco if-else

else if

operador ?

expressões booleanas

Operadores booleanos

switch-case

switch-case

switch-case

loops

while

do... while

for

BREAK

CONTINUE

CAIXAS DE MENSAGEM

ALERT

confirm

prompt

Javascript - Introdução e Sintaxe

More from diegoep