Informática I. Aula 6. Aula 6-12/09/2007 1

Tamanho: px

Começar a partir da página:

Download "Informática I. Aula 6. http://www.ic.uff.br/~bianca/informatica1/ Aula 6-12/09/2007 1"

Zaira Brunelli Terra
8 Há anos
Visualizações:

1 Informática I Aula 6 Aula 6-12/09/2007 1

2 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

Abstração e Funções Algoritmos e linguagens de programação Programação orientada a eventos Ciência da

3 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

Sua aparência e comportamento são fixos.

4 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

O principal uso de JavaScript é em funções que ficam embutidas em páginas

5 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

Linguagens de programação de propósito geral servem para criar programas para uma variedade de tipos de aplicação. Ex.

6 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

O código JavaScript deve ficar entre as tags <script type= text/javascript > e

7 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

document.write = ( Olá + usuario +. + Bemvindo à minha página.

8 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

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.

9 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

A mensagem mostrada pode ser uma combinação de texto literal em aspas e variáveis, separadas pelo sinal +.

10 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/

11 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/

document.write = ( Olá <i> + usuario + </i>. + Bem-vindo à minha página.

12 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/

Avançado Mostre uma notificação para cada erro de

13 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/

Espaços e outros caracteres especiais não podem ser usados. Nomes de variáveis válidos: tempemcent, SOMA, idade_atual, x2.

14 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/

Soma, soma e SOMA são variáveis diferentes.

15 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/

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.

16 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/

write("a melhor sobremesa é " + sobremesa); sobremesa = prompt("qual é a sobremesa de que você

17 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/

18 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/

", ""); sobremesa = prompt("qual é a sobremesa de que você menos gosta?

19 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/

write("a melhor sobremesa é " + sobremesa); sobremesa = prompt("qual é a sobremesa de que você menos

20 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/

Se um valor vai ser usado várias vezes em um programa, podemos usar uma

21 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/

22 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/

Documentos relacionados

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem.

O código JavaScript deve ser colocado entre tags de comentário para ficar escondido no caso de navegadores antigos que não reconhecem a linguagem. 1 - O que é JAVASCRIPT? É uma linguagem de script orientada a objetos, usada para aumentar a interatividade de páginas Web. O JavaScript foi introduzido pela Netscape em seu navegador 2.0 e posteriormente