HTML / JAVASCRIPT Estamos iniciando o estudo do HTML através das TAGS (comandos) para construir formulários. Isso facilitará a continuidade dos nossos estudos da linguagem de programação JavaScript, a partir de agora de forma realmente associada a um código HTML. HTML 1. Introdução Significado do Termo HTML: HyperText Markup Language (Linguagem de Marcação de Hipertexto). É uma linguagem para estruturação e apresentação de conteúdo para a World Wibe Web (www - Teia Mundial). De modo simplificado, podemos dizer que é a linguagem com a qual são feitas as páginas que irão compor um site da Internet (www). A linguagem HTML é uma linguagem simples, por isso ela é o padrão da Internet. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.). 2. Como funciona uma página HTML? O espaço para uma página na Internet fica em um computador, onde estão todos os arquivos de HTML, som, imagem, etc., ou seja, tudo aquilo que vai compor a página/site. Este computador onde ficam os arquivos da sua HOME PAGE (página principal/site) é chamado de SERVIDOR, pois a qualquer hora do dia ou da noite ele vai estar ligado para que todos possam acessar aquele site. Quando uma pessoa entra em uma home page, ela está acessando este servidor. Nas páginas, com auxílio das tags, coloca-se texto (comum, tabelas, listas, etc.), imagens e sons. Além disso, as páginas da Web podem ser ligadas entre si, formando o que se chama de LINK. Os navegadores são os programas responsáveis por mostrar as páginas, ou seja, montar as páginas seguindo as instruções (TAGS) contidas no arquivo HTML. 3. A Estrutura das Tags <xxx> </xxx> Este é o inicio da tag;* Este é o fechamento da tag para que ela possa funcionar.** * xxx é apenas uma representação de uma tag, não é uma tag HTML. ** Algumas tags possuem fechamento diferente.
4. A Estrutura Básica de um Documento HTML <head> <title> Meu documento HTML </title> </head> Aqui serão colocados os comandos em HTML para construção da página. Após iniciar o documento com a tag você deve incluir o cabeçalho. O cabeçalho é indicado pelas tags <head>... </head> (serão detalhadas posteriormente). Dentro do cabeçalho você indica um título usando o par <title>... </title>. Geralmente os navegadores utilizam o texto indicado como título para dar nome à guia de visualização da página. O "corpo do documento deve ser demarcado pelo par.... Nesta parte do documento você coloca todo o conteúdo da página html (os comandos (tags) para estruturar a página junto com os textos, imagens, etc.). Documento HTML com JavaScript: <head> <title> Meu documento HTML </title> </head> Aqui serão colocados os comandos em HTML para construção da página <script type=" text/javascript"> Aqui entra o código do programa JavaScript. Se forem criadas funções, elas podem ser escritas aqui ou dentro da tag <head> </head> </script> 5. Tags HTML mais comuns
6. Exercícios de Aprendizagem 6.1. No item 16 deste site, em um exercício JavaScript que usava vetor\matriz, foram apresentadas de maneira informal, através de exemplo, algumas das tags html para criar formulário. Reveja o código abaixo (você vai precisar para este exercício). <form name="form" > <select name="produtos"> <option>camiseta </option> <option>polo </option> <option>camisa Social </option> </select> <select name="tamanhos"> <option>pequeno </option> <option>médio </option> <option>grande </option> </select> <input type="button" value="obter preço " onclick="trazer()"> <input type="text" name="opreco"> </form> <script type="text/javascript"> matriz = new Array(3); matriz[0] = new Array(3); matriz[1] = new Array(3); matriz[2] = new Array(5); matriz[0][0]="100"; matriz[0][1]="200"; matriz[0][2]="300"; matriz[1][0]="400"; matriz[1][1]="500"; matriz[1][2]="600"; matriz[2][0]="700"; matriz[2][1]="800"; matriz[2][2]="900"; function trazer() { i = document.form.produtos.selectedindex; j= document.form.tamanhos.selectedindex; document.form.opreco.value=matriz[i][j]; } </script> Construir uma página HTML/JavaScript para calcular um valor (X) em regra de três conforme a imagem abaixo. Atenção: - Você vai precisar também da tag <h1> </h1> para gerar o título Regra de 3. Esta tag <h> pode gerar títulos de vários níveis, o maior é gerado pela tag <h1> existindo também os níveis menores <h2>, <h3>, <h4>, <h5> e <h6>. - Vai precisar também da tag <br> que faz um quebra de linha de texto.
6.2. Alterar o código do exercício anterior (6.1). Usar o elemento <label> para identificar a última caixa de texto (em vez de simplesmente digitar o texto Valor de X: como foi feito no exercício anterior). Veja: <label for="resultado">valor de X: </label> <imput type="text" name="..." id="resultado" /> O atributo for do elemento <label> deve possuir valor igual ao atributo id da caixa de entrada (caixa de texto), no exemplo acima resultado. Isso serve para garantir acessibilidade, pois basta clicar na etiqueta ( Valor de X: ) para que a caixa de entrada já receba o foco. Obs.: o atributo name e o atributo id podem ter o mesmo valor, ou seja, no exemplo acima o atributo name poderia ter o valor resultado ou então o atributo id poderia ter o valor que você usou no atributo name. Obs.: id é normalmente utilizado com CSS (será estudado) e name com javascript para fazer referência a um elemento. 6.3. Após ler as informações a seguir, criar um formulário para calcular juros simples e montante. Ao trabalhamos com juros, consideramos as seguintes variáveis: C Capital inicial ou principal, é quantia aplicada ou tomada emprestada. t É o período de tempo em que o capital será aplicado. j É o juro (valor) resultante da operação. i É a taxa percentual aplicada ao capital para a apuração do juro. M O montante é a soma do capital inicial com o juro produzido em todo o período. Quando tivermos o valor do capital (C) a taxa de juros ( i ) e o tempo da aplicação ( t ) para a obtenção do valor do juro (j) e do montante (M) iremos utilizar as fórmulas: j = C. i. t M = C + j Exemplo: Uma importância de R$ 5.000,00 emprestado a juros simples, pelo prazo de 3 meses, à taxa de 5% ao mês (5/100=0,05 ao mês) resultaria em juros totais de R$ 750,00 e em um montante de R$ 5.750,00. Veja: j = C. i. t j = 5000,00 x 0,05 x 3 juro (j) = 750,00 M = C + j M = 5000,00 + 750,00 montante(m) = 5.750,00 Agora construa um formulário para calcular e apresentar o valor do juro e do montante, conforme os valores de capital inicial, taxa de juros e tempo de aplicação (prazo) informados pelo usuário. O formulário deve ficar semelhante à figura a seguir.
Atenção: Dê aos objetos tipo text do formulário os nomes C, j, i, t, M. 6.4. Altere o código do exercício 6.2 (Regra de Três). O 1º objetivo é criar um botão que limpe o valor do Capital Inicial. Dica: <input type="button" value="limpar C.Inicial" onclick="document.xxx.c.value='' "> Onde: xxx é o nome dado ao formulário. O 2º objetivo é criar um botão que limpe todos os campos. Dica: <input type="reset" value="limpar Formulário"/>