Informática I Aula 6 http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1
Ementa Noções Básicas de Computação (Hardware, Software e Internet) HTML e Páginas Web Internet e a Web Javascript e páginas dinâmicas Números e expressões em Javascript Histórico dos Computadores Abstração e Funções Algoritmos e linguagens de programação Programação orientada a eventos Ciência da computação como disciplina Execução condicional Representação de dados Computação e sociedade Aula 6-12/09/2007 2
Limitações de HTML A linguagem HTML foi criada para formatação de documentos com textos, imagens e links. As páginas são estáticas. Sua aparência e comportamento são fixos. HTML não serve para criar páginas com conteúdo dinâmico. Páginas dinâmicas se modificam ao longo do tempo ou em resposta a um comando do usuário. Aula 6-12/09/2007 3
JavaScript Linguagem simples criada pela Netscape em 1995 para especificar páginas web dinâmicas. O principal uso de JavaScript é em funções que ficam embutidas em páginas HTML. Apesar do nome, não tem relação direta com a linguagem Java. Sintaxe lembra a de C++ e de Java. Aula 6-12/09/2007 4
Linguagens de Programação Ao contrário de HTML, JavaScript é uma linguagem de programação de propósito específico. Cada comando de uma linguagem de programação especifica uma ação que o computador deve executar. Linguagens de programação de propósito geral servem para criar programas para uma variedade de tipos de aplicação. Ex.: C++, Java, C, Fortran. Linguagens de programação de propósito específico servem para um tipo específico de aplicação. Ex.: JavaScript (criar páginas web dinâmicas), SQL (fazer consultas a banco de dados). Aula 6-12/09/2007 5
JavaScript A maneira mais simples de tornar uma página web dinâmica é colocar comandos de JavaScript diretamente no código da página. O código JavaScript deve ficar entre as tags <script type= text/javascript > e </script>. O código JavaScript é executado sequencialmente quando a página é carregada. Aula 6-12/09/2007 6
Exemplo 1 <html> <head><title>boas-vindas</title></head> <body> <script type= text/javascript > usuario = prompt( Por favor digite seu nome, ); document.write = ( Olá + usuario +. + Bemvindo à minha página. ); </script> <p> Continuação da página. </p> </body> </html> Aula 6-12/09/2007 7
O comando prompt usuario = prompt( Por favor digite seu nome, ); O comando prompt abre uma janela para que o usuário digite uma informação. O usuário deve digitar na caixa de texto e apertar o botão OK. A palavra usuario é uma variável que guarda o que foi digitado pelo usuário. Em programação, uma variável é um nome utilizado para simbolizar um valor dinâmico. O valor da variável é guardado na memória e acessado através do seu nome. Formato geral do comando prompt: VARIAVEL = prompt(mensagem, TEXTO INICIAL); O comando tem dois parâmetros: a mensagem que vai ser mostrada ao usuário e o texto inicial da caixa de texto. Aula 6-12/09/2007 8
O comando document.write document.write( Olá + usuario +. + Bem-vindo à minha página. ); O comando document.write escreve uma mensagem na página. A mensagem mostrada pode ser uma combinação de texto literal em aspas e variáveis, separadas pelo sinal +. A variável é substituída pelo seu valor quando a mensagem é mostrada. Formato geral do comando document.write: document.write( MENSAGEM1 + VARIAVEL1 + MENSAGEM2 +...); Aula 6-12/09/2007 9
Formatação da Saída A saída de um comando write é colocada dentro da página e o navegador a mostra da mesma forma que qualquer outro texto. Se a saída incluir tags HTML essas tags serão interpretadas pelo navegador. Aula 6-12/09/2007 10
Exemplo 2 <html> <head><title>boas-vindas</title></head> <body> <script type= text/javascript > usuario = prompt( Por favor digite seu nome, ); document.write = ( Olá <i> + usuario + </i>. + Bem-vindo à minha página. ); </script> <p> Continuação da página. </p> </body> </html> Aula 6-12/09/2007 11
Mensagens de erro Para visualizar mensagens de erro do JavaScript: Internet Explorer: Ferramentas Opções Avançado Mostre uma notificação para cada erro de script. Firefox : Opções Console de Erro Aula 6-12/09/2007 12
Variáveis em Javascript Variáveis são usadas para representar valores dinâmicos. Uma variável é representada por uma sequência de letras, números e underscores, começando sempre por uma letra. Espaços e outros caracteres especiais não podem ser usados. Nomes de variáveis válidos: tempemcent, SOMA, idade_atual, x2. Nomes de variáveis inválidos: duas palavras, força, idade, 2p. Para ajudar no entendimento do código, o nome da variável deve ter relação com a sua função no código. Aula 6-12/09/2007 13
Variáveis em JavaScript JavaScript é case-sensitive. Letras maiúsculas e minúsculas são diferenciadas. Soma, soma e SOMA são variáveis diferentes. Palavras reservadas da linguagem também não podem ser usadas como variáveis. Aula 6-12/09/2007 14
Variáveis e células de memória Abstratamente, variáveis representam valores que podem mudar ao longo do tempo. Na prática, cada variável é associada com uma célula de memória que guarda o valor atual da variável. Quando ocorre um comando de atribuição o valor dentro da célula de memória é modificado. Só o valor da última atribuição é guardado. Em JavaScript a atribuição é feita através do sinal de igual (=). Depois da atribuição qualquer referência à variável será equivalente a usar o valor atribuído. Aula 6-12/09/2007 15
Exemplo 3 <html> <head><title>preferências</title></head> <body> <script type="text/javascript"> sobremesa = prompt("qual é a sobremesa de que você mais gosta?", ""); document.write("a melhor sobremesa é " + sobremesa); sobremesa = prompt("qual é a sobremesa de que você menos gosta?", ""); document.write("a pior sobremesa é " + sobremesa); </script> </body> </html> Aula 6-12/09/2007 16
Exercício 1 O que aconteceria nesse caso? sobremesa = prompt("qual é a sobremesa de que você mais gosta?", ""); document.write("a melhor sobremesa é " + sobremesa); sobrenesa = prompt("qual é a sobremesa de que você menos gosta?", ""); document.write("a pior sobremesa é " + sobremesa); Aula 6-12/09/2007 17
Exercício 2 O que aconteceria nesse caso? sobremesa = prompt("qual é a sobremesa de que você mais gosta?", ""); sobremesa = prompt("qual é a sobremesa de que você menos gosta?", ""); document.write("a melhor sobremesa é " + sobremesa); document.write("a pior sobremesa é " + sobremesa); Aula 6-12/09/2007 18
Exemplo 4 <html> <head><title>preferências</title></head> <body> <script type="text/javascript"> sobremesa = prompt("qual é a sobremesa de que você mais gosta?", Mousse de chocolate"); document.write("a melhor sobremesa é " + sobremesa); sobremesa = prompt("qual é a sobremesa de que você menos gosta?", Salada de frutas"); document.write("a pior sobremesa é " + sobremesa); </script> </body> </html> Aula 6-12/09/2007 19
Utilizando variáveis para facilitar alterações Nem sempre uma variável precisa ter seu conteúdo modificado ao longo do programa para ser útil. Se um valor vai ser usado várias vezes em um programa, podemos usar uma váriavel ao invés do próprio valor. Facilita alterações no programa. Aula 6-12/09/2007 20
Exemplo 5 <html> <head><title>universidade</title></head> <body> <script type="text/javascript"> universidade = "Universidade Federal Fluminense"; endereco = prompt("qual é o endereço da " + universidade, ""); document.write("o endereço da + universidade + " é " + endereco + ".<br>"); </script> </body> </html> Aula 6-12/09/2007 21
Mensagens de erro comuns Unterminated string literal. Exemplos corretos: Document.write( meu nome é + nome); Document.write( meu nome é + nome); Exemplo incorreto: Document.write( meu nome é + nome); Missing ) after argument list. Exemplo correto: Document.write( O valor de x é + x); Exemplo incorreto Document.write( O valor de x é x); Aula 6-12/09/2007 22