Algoritmos e Programa - o - Integra - o Com o HTML

Enviado por

madalenaschimitd

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

5 visualizações

Algoritmos e Programa - o - Integra - o Com o HTML

Enviado por

madalenaschimitd

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 21

Algoritmos e

Programação
Profº. Marcos Vinícius Montanari
Integração com o
HTML
Introdução
Para desenvolver uma página web, devemos criar um arquivo
HTML contendo as tags (comandos) HTML que deﬁnem o
conteúdo dos elementos que constituem a página. Depois de
salvar o arquivo, ele deverá ser aberto em um navegador web
que vai renderizar (visualizar) esse documento. Nenhum processo
adicional é necessário.
Introdução
Os códigos de programas JavaScript são desenvolvidos para
adicionar um comportamento à página. Também não é preciso
compilar o programa ou outra ação adicional. O próprio navegador
web contém um interpretador para os programas JavaScript.

Eles são inseridos nas páginas web em uma seção delimitada pelas
tags <script> e </script> ou em um arquivo .js que deve ser
referenciado pelo documento HTML.
Eventos e funções
Eventos e funções
Ao carregar a página HTML, o navegador apresentou o nome do
programa, um campo de texto precedido pela palavra Nome e
um botão. A página está ali estática, esperando que você digite
um nome e clique no botão. Ao clicar sobre o botão, uma função
deve ser executada.

Muito da programação JavaScript construída em páginas web é

desenvolvida desta forma: elas são acionadas a partir da
ocorrência de um evento.
Eventos e funções
Quando o usuário executa uma ação, o programa responde ao
evento do usuário com uma ou mais ações programadas em
uma função. O evento mais comum de ser programado é o
clique no botão. Mas há diversos outros, como modificar o
conteúdo de um campo, enviar os dados de um formulário,
sair de um campo, carregar a página, entre outros.
Eventos e funções
Para criar um evento e definir qual função será acionada quando
esse evento ocorrer, deve-se utilizar uma palavra reservada para
indicar para qual evento a linguagem ficará “na escuta”, seguido
do nome da função a ser acionada. A palavra reservada pode
ser, por exemplo, (on)click, (on)change, (on)submit, (on)blur
ou (on)load. O uso do “on” para preceder o evento vai depender
da forma a ser utilizada para criar o link entre o HTML e o
JavaScript.
Eventos e funções
Para criar um evento e definir qual função será acionada quando
esse evento ocorrer, deve-se utilizar uma palavra reservada para
indicar para qual evento a linguagem ficará “na escuta”, seguido
do nome da função a ser acionada. A palavra reservada pode
ser, por exemplo, (on)click, (on)change, (on)submit, (on)blur
ou (on)load. O uso do “on” para preceder o evento vai depender
da forma a ser utilizada para criar o link entre o HTML e o
JavaScript.
Eventos e funções
Já as funções JavaScript são declaradas a partir da palavra-chave
function seguida do nome da função e dos parênteses ( ). Uma
função contém um conjunto de comandos que realizam uma
ação.

Os comandos que pertencem a uma função devem estar

delimitados pelas chaves { }. A função do exemplo anterior é a
seguinte:
Método getElementById()
Para referenciar um elemento HTML identiﬁcado no documento,
deve-se utilizar o método getElementById(). Esse método
permite referenciar qualquer elemento da página, como um
campo de formulário, um parágrafo, um botão, uma imagem,
entre outros. Para que um elemento HTML seja referenciado, ele
precisa conter um atributo id.
Método getElementById()
Podemos armazenar a referência a um elemento em uma
variável e depois obter a sua propriedade, como no exemplo a
seguir:

Ou, então, utilizar um único comando, acessando diretamente a

propriedade que queremos obter ou alterar, como a seguir.

Propriedades textContent e
value
Na função mostrarOla(), são utilizadas as propriedades value e
textContent. Elas serão utilizadas em praticamente todos os
programas desenvolvidos a partir de agora. A propriedade value
obtém ou altera o conteúdo de um campo de formulário HTML.

Portanto, para obter o nome do usuário informado no Exemplo

2.1, é preciso utilizar essa propriedade junto com o método
getElementById() que faz uma referência a um campo de
formulário identiﬁcado no código HTML.
Propriedades textContent e
value
Já a propriedade textContent serve para alterar ou obter o
conteúdo de elementos de texto do documento identiﬁcados
no código HTML. É possível, portanto, alterar o texto de
qualquer parágrafo ou texto de cabeçalho em uma página web
utilizando essa propriedade.
Exemplo Completo
Crie um arquivo chamado ex2_1.js e digite o código abaixo. Não
se esqueça de salvar no mesmo local onde está salvo o exemplo
2.1.
Operadores aritméticos e
funções matemáticas
Além dos tradicionais operadores de adição (+),
subtração (-), multiplicação (*), divisão (/) e exponenciação
(**), as linguagens de programação dispõe também do
operador módulo (%). O módulo é utilizado para obter o resto
da divisão entre dois números. Observe as seguintes expressões
matemáticas:
Operadores aritméticos e
funções matemáticas
Na primeira expressão, a variável a recebe 1 porque 5 dividido
por 2 é 2 e o resto é 1. Na segunda expressão, a variável b
recebe 3 porque 7 dividido por 4 é 1 e o resto da divisão é 3.

Outros cálculos como raiz quadrada, seno e cosseno podem ser

obtidos em JavaScript com o uso das funções matemáticas da
classe Math.
Operadores aritméticos e
funções matemáticas
Math.abs(num) Retorna o valor absoluto de um número
Exemplo: Math.abs(-3) => 3

Math.ceil(num) Arredonda o valor para cima

Exemplo: Math.ceil(4.2) => 5

Math.ﬂoor(num) Arredonda o valor para baixo

Exemplo: Math.ﬂoor(7.9) => 7

Math.pow(base, exp) Retorna a base elevada ao expoente

Exemplo: Math.pow(3, 2) => 9

Math.random() Retorna um número aleatório entre 0 e 1

Exemplo: Math.random() => 0.6501314074022906

Math.round(num) Arredonda o valor para o inteiro mais próximo

Exemplo: Math.round(2.7) => 3

Math.sqrt(num) Retorna a raiz quadrada do número

Exemplo: Math.sqrt(16) => 4
Exercícios
Elaborar um programa para uma Vídeo Locadora, que leia o
título e a duração de um ﬁlme em minutos. Exiba o título
do ﬁlme e converta a duração para horas e minutos.
Exercícios
Elaborar um programa para uma revenda de veículos. O
programa deve ler modelo e preço do veículo. Apresentar como
resposta o valor da entrada (50%) e o saldo em 12x.
Exercícios
Elaborar um programa para um restaurante que leia o preço por
kg e o consumo (em gramas) de um cliente. Exiba o valor a ser
pago.