Introdução ao Javascript€¦ · Introdução ao Javascript . Programação WEB I. Apresentação da Disciplina,Introdução a linguagem . Javascript . Thiago Miranda dos Santos

Thiago Miranda dos Santos Souza

Introdução ao Javascript

Programação WEB I

Apresentação da Disciplina,Introdução a linguagem Javascript


Objetivos da Disciplina • Apresentar os principais conceitos da linguagem Javascript referente à programação do lado cliente de uma aplicação Web • Compreender o método de requisição assíncrona AJAX, bem como sua utilização juntamente com Javascript e XML. • Identificar e conhecer o funcionamento, as técnicas e recursos oferecidos pelo Framework Jquery para a linguagem de desenvolvimento de aplicações web dinâmicas com Javascript.

Programação Web I


Ementa da Disciplina 1. Introdução a linguagem Javascript. 2. Características da linguagem de programação JavaScript 3. Diferenciação entre linguagens Client-Side e Server-Side 4. Javascript.

a) Sintaxe da linguagem b) Variáveis. c) Operadores lógicos. d) Operadores matemáticos. e) Instruções de repetição. f) Instruções condicionais. g) Eventos e mensagens h) Manipulação de Elementos e Formulários HTML i) Funções j) Funções intrínsecas. k) Manipulando arrays (matrizes). l) Manipulando strings. m) Manipulação de datas. n) Interação com o usuário.

5. Ajax – Método de Requisição assíncrona (Ajax, XML e Javascript) 6. Frameworks para a linguagem Javascript (Caso: Jquery)

Programação Web I


Proposta de trabalho

• Enfoque teórico e prático com uso de muitos exercícios, realizados em sala e em casa para fixação • Aprendizado visando a aplicação prática do conhecimento • Avaliação Serial e diária

Programação Web I


Cronograma da I Unidade Apresentação da disciplina Introdução ao Javascript Estruturas de Controle e Repetição Objetos, Funções e Manipulação de Arrays

Programação Web I


Avaliação Avaliação Serial (Diária) • Atividades Práticas- Valor: 3 pontos • Avaliação Teórica: 4 Pontos • Trabalho Prático: 3 pontos

• Deverá ser entregue no dia 01/04.

Programação Web I


Conteúdos

Os materiais de aula, apostilas e outras informações estarão disponíveis em:

www.thiagomiranda.net

Programação Web I

http://www.thiagomiranda.net/�

Desenvolvimento WEB

Camadas de Desenvolvimento • Estruturação de Conteúdo: HTML; • Apresentação: CSS; • Comportamento: Javascript.


Programação Web I

Desenvolvimento WEB

HTML é uma linguagem voltada para definir a estrutura de documentos - Nao e uma linguagem de programacao - 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


Programação Web I

Desenvolvimento WEB

O HTML não é uma linguagem de formatação - A aparência dos documentos não pode ser completamente controlada. - Necessidade de uma linguagem complementar: Folhas de Estilo (CSS)


Programação Web I

Desenvolvimento WEB

JavaScript vem a atender a duas demandas em especial: - Processamento no lado cliente - Controle da aplicação


Programação Web I

Limitações do HTML


Programação Web I

Processamento no lado cliente

– Dados incorretos não precisam ser passados ao servidor – Diminuição de tráfego

Limitações do HTML Controle da Aplicação – Monitorar carga e descarga de documentos – Alterar propriedades conforme necessário – Acessar propriedades do browser


Programação Web I

Javascript JavaScript é uma linguagem interpretada - Não necessita de compilação para executar programas - Navegador precisa conter apenas um programa interpretador de JavaScript -Linguagem de script que proporciona interatividade e dinamismo à páginas HTML Desenvolvida por Brendan Eich, em 1995, para o Netscape Navigator(2.0). Posteriormente incorporado ao Internet Explorer. A princípio se chamava LiveScript -JavaScript não é Java! Sintaxe parecida, vinda de C/C++, mas com origens distintas Java é uma linguagem bem mais poderosa e complexa Thiago Miranda dos Santos Souza

Programação Web I

Javascript - Apresenta algumas semelhanças de sintaxe com a linguagem de programação JAVA. Mas é totalmente diferente no conceito e no uso. - Com a popularização do JAVA, aliado à uma colaboração considerável da SUN no desenvolvimento da linguagem, tem seu nome alterado para JAVASCRIPT


Programação Web I

Destaques da linguagem Controlar a aparência e conteúdo do documento – Escrever código em documento enquanto ele está sendo interpretado pelo browser Controlar o browser – Abrir novas janelas, exibir mensagens na barra de status, etc. Interagir com formulários HTML – Validação de formulários


Programação Web I

Código Javascript Blocos <SCRIPT> – Usado para definir funções que serão usadas dentro da mesma página. Arquivos externos – Definir funções que serão usadas por várias páginas (.js) Dentro de Tags HTML – Manipulação de eventos


Programação Web I

Código Javascript <html> <head> <title>JavaScript</title> <script type=“text/javascript”> document.write(“Primeiro Exemplo de JS”); </script> </head> <body> </body> </html>


Programação Web I

Tratamento de Eventos Um evento é um acontecimento ou ação que provoca a execução de uma determinada operação – Clique de um botão – Seleção de um texto – Mudança de um campo Eventos nativos são eventos do HTML cujas respostas são específicas da linguagem e não precisam ser programadas. – Clique sobre um link – Clique sobre um botão submit – Clique sobre um botão reset Thiago Miranda dos Santos Souza

Programação Web I

Tratamento de Eventos


Programação Web I

Caixas de mensagens Alert – Chama atenção para um evento ocorrido <input type=“button” value=“teste1” onclick="alert('Você Clicou no Botão')" >


Programação Web I

Caixas de mensagens Confirm – Solicita confirmação de uma determinada operação realizada <input type=“button” value=“teste2” onmouseout=“confirm('tem certeza que deseja fazer isso?‘) " >


Programação Web I

Caixas de mensagens Prompt – Permite ao usuário passar um dado específico além de escolher se confirma ou cancela <body onload=“prompt('tem certeza que deseja fazer isso?’, ‘texto default’ ) " >


Programação Web I

Sintaxe e Estrutura Estrutura Léxica – Case sensitive Valor, VALOR e VaLOR são variáveis diferentes – Ponto e vírgula opcional (Preferenciamente deve-se utilizar)

Inserido automaticamente a = 3 b = 4 a = 3; b = 4;


Programação Web I

Sintaxe e Estrutura Comentários Suporta estilos de C e C++ // texto até o fim da linha /* texto entre duas marcas */


Programação Web I

Sintaxe e Estrutura Tipos de Dados e Valores – São suportados três tipos básicos primitivos • Números • Strings • Valores lógicos (booleanos) – São suportados dois tipos compostos • Objetos • Arrays


Programação Web I

Sintaxe e Estrutura Há duas formas de se declarar variáveis: – Declaração implícita Atribui-se um valor a um identificador cujo nome não seja uma palavra reservada salario = 1000; nome = “João”; – Declaração explicita Usa-se a palavra reservada var para definir que o identificador a seguir é uma variável var salario; var nome;


Programação Web I

Sintaxe e Estrutura Declaração de variáveis – var i: – var soma; – var i, soma; – var i = “olá, mundo” – var soma = 0, y = 10, x = 20;


Programação Web I

Sintaxe e Estrutura Declaração de variáveis – var i: – var soma; – var i, soma; – var i = “olá, mundo” – var soma = 0, y = 10, x = 20; – Não é necessário inicializar a variável na declaração – Nesse caso o valor é indefinido (undefined)


Programação Web I

Conversão de tipos Em JavaScript as variáveis não são tipadas – O tipo da variável depende do valor assumido naquele instante y = 10 y = “nome” – A conversão de tipos é automática Em alguns casos como dados vindos de um formulário ou da caixa de dialogo prompt, devemos utilizar uma função para converter os tipos como a parseInt e parseFloat.


Programação Web I

Conversão explícita de tipos parseInt(str) ou parseInt(str, base) Converte uma string para um número inteiro. Exemplo: num = "3A"; x = parseInt(num); // x = 3 y = parseInt(num, 16); // y = 58 parseFloat(str) Converte uma string para um número real. Exemplo: z = parseFloat("3.14"); // z = 3.14


Programação Web I

Conversão de tipos Vantagem – Simplicidade – Flexibilidade Desvantagem – Programador tem que estar atento à utilização de cada variável


Programação Web I

Tipo de Dados String – Entre aspas simples (‘ e ’) ou dupla (“ e ”) Var palavra = “um monte de palavras”;


Programação Web I

Tipo de Dados Números Podem ser inteiro ou ponto flutuante – Internamente são representados como ponto flutuante de dupla precisão – Representações: Decimais: 1, 200, -20 Octais: 0121, 0677 Hexadecimais: 0Xffac, 0Xaa11


Programação Web I

Tipo de Dados Boolean – Geralmente obtidos através de expressões condicionais ou funções lógicas condicao = true;


Programação Web I

Escopo das Variaveis Local São definidas dentro do corpo de uma função. Elas são válidas apenas dentro do corpo da função onde foram definidas (escopo limitado). Exemplo: function adiciona(valor){ var a a = valor + 10; } Neste exemplo, a variável a é vista apenas pela função adiciona()


Programação Web I

Escopo das Variaveis Global São definidas fora de todos os corpos de funções de um arquivo Javascript. Elas são válidas dentro de qualquer função do arquivo. Exemplo: var total = 0; function adiciona(valor){ var a = valor + 10; total = total + a; }


Programação Web I

Exercício

Utilizando a caixa de mensagem prompt, crie um script que receba o nome de uma pessoa em uma variavel e imprima na página


Programação Web I

Operadores Aritmeticos Javascript define os 4 operadores aritmeticos: • (+) - Soma • (-) - Subtração • (*) - Multiplicação • (/) - Divisão • Módulo (%) - Retorna o resto da operação de divisão inteira entre os operandos. Exemplo: 22 % 5 => 2

document.write(4+5); Thiago Miranda dos Santos Souza

Programação Web I

Operadores Aritmeticos Precedencia de operadores: document.write(4 + 5 * 2);

14


Programação Web I

Exercício

Utilizando a caixa de mensagem prompt, crie um script que receba dois números e realize as quatro operações aritmeticas com eles e imprima cada resultado na página.


Programação Web I

Concatenação

O operador + tem duas funções em Javascript: - Numero + Numero → Adição - String + String → Concatenação - Numero + String → Concatenação - String + Numero → Concatenação


Programação Web I

Concatenação


Programação Web I

Vamos praticar Utilizando as caixas de dialogo prompt e alert , faça o que se pede: 1- Faça um programa que leia um número e informe a metade e o dobro desse número. 2 – Escreva um programa que permita receber o nome e a idade de uma pessoa e em seguida, informar o nome digitado e a idade da pessoa daqui a 30 anos. 3- Faça um programa que leia três notas de um aluno, calcule e imprima a média aritmética entre essas notas.


Programação Web I

Documents

Introdução ao Javascript€¦ · Introdução ao Javascript . Programação WEB I. Apresentação da Disciplina,Introdução a linguagem . Javascript . Thiago Miranda dos Santos