Programação WEB I Introdução ao Javascript 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.
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)
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
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
Conteúdos Os materiais de aula, apostilas e outras informações estarão disponíveis em: www.thiagomiranda.net
História do Javascript CMM 1992 SCRIPTEASE
História do Javascript Netscape Brendan Eich 1995 Mocha LiveScript
História do Javascript livescript Java
Apresenta algumas semelhanças de sintaxe com a linguagem de programação JAVA, já que ambas são baseadas na sintaxe C/C++ Mas é totalmente diferente no conceito e no uso. JavaScript é uma linguagem Interpretada.
História do Javascript 1996 VbScript JScript
História do JavaScript Programação Web I
Desenvolvimento WEB Camadas de Desenvolvimento Estruturação de Conteúdo: HTML; Apresentação: CSS; Comportamento: Javascript.
Desenvolvimento WEB HTML é uma linguagem voltada para definir a estrutura de documentos - Não e 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
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)
Desenvolvimento WEB JavaScript vem a atender a duas demandas em especial: - Processamento no lado cliente - Controle da aplicação
Limitações do HTML 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
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
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
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
Código Javascript <html> <head> <title>javascript</title> <script type= text/javascript > document.write( Primeiro Exemplo de JS ); </script> </head> <body> </body> </html>
Caixas de mensagens Alert Chama atenção para um evento ocorrido <input type= button value= teste1 onclick="alert('você Clicou no Botão')" >
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? ) " >
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 ) " >
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
Tratamento de Eventos
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;
Sintaxe e Estrutura Comentários Suporta estilos de C e C++ // texto até o fim da linha /* texto entre duas marcas */
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
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;
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;
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)
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.
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
Conversão de tipos Vantagem Simplicidade Flexibilidade Desvantagem Programador tem que estar atento à utilização de cada variável
Tipo de Dados String Entre aspas simples ( e ) ou dupla ( e ) Var palavra = um monte de palavras ;
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
Tipo de Dados Boolean Geralmente obtidos através de expressões condicionais ou funções lógicas condicao = true;
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()
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; }
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
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);
Operadores Aritmeticos Precedencia de operadores: document.write(4 + 5 * 2); 14
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.
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
Concatenação
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.