1 Criando um script simples As ferramentas de script Diferente de muitas linguagens de programação, você não precisará de quaisquer softwares especiais para criar scripts de JavaScript. A primeira coisa de que você precisará para trabalhar com JavaScript é um editor. Os scripts de JavaScript são armazenados em arquivos de texto simples, normalmente como parte de documentos de HTML. Qualquer editor que pode armazenar arquivos de texto ASCII servirá. Para computadores Windows, eis alguns editores recomendados: Mircosoft FrontPage Bloco de Notas Iniciando o script Seu script, como a maioria dos programas de JavaScript, inicia com a tag <SCRIPT> de HTML. A tag <SCRIPT> diz ao navegador para começar tratando o texto como um script e a tag </SCRIPT> retorna à HTML normal. Na maioria dos casos, você não pode utilizar instruções JavaScript exceto dentro das tags <SCRIPT>. A exceção são os handlers de evento, descritos mais adiante. Para começar a criar o script, abra seu editor de texto e digite as tags <SCRIPT> de início e de fim, como mostrado abaixo: <SCRIPT LANGUAGE="JavaScript1.1"> </SCRIPT> Já que este exemplo utilizará alguns recursos que não estavam disponíveis no JavaScript 1.0, foi especificado o JavaScript 1.1 na tag <SCRIPT>. Esse script funcionará no Netscape 3.0 ou superior. Adicionando instruções JavaScript Vamos implementar um script para calcular o número de segundos que faltam para o ano É importante observar que o JavaScript armazena as datas em número de milisegundos desde o 1 o de janeiro de Armazenando dados em variáveis Para armazenar o script, você utilizará uma variável para armazenar a data atual e outra para representar o começo do ano 2001 Para começar a escrever o script, adicione as seguintes linhas depois da primeira tag <SCRIPT>. now = new Date( ); y2k1 = new Date ("Jan :00:00"); E. Nemer 1 / 1 05/03/10 1
2 Cada uma dessas instruções atribui um valor (uma data) a uma variável. A primeira instrução cria uma variável chamada now e armazena a data e a hora atuais nela. A segunda instrução cria uma variável chamada y2k1 e armazena o primeiro instante do ano 2001 nela.. Calculando o resultado Como o JavaScript armazena datas em milisegundos; temos duas variáveis contendo números de milisegundos. Para calcular o tempo restante até o ano 2001, você simplesmente subtrai a data futura da data de hoje: y2k1 - now O resultado seria o número de milisegundos que falta até o ano Para converter este valor de milisegundos para segundos, basta inserir a seguinte linha de código segundos = (y2k1 - now) / 1000; Essa instrução diz ao computador para criar uma terceira variável denominada segundos e armazenar nela o resultado da expressão que vem à direita (Os parênteses da última instrução asseguram que a subtração acontecerá antes da divisão). Criando uma saída Você agora tem uma variável, segundos, que armazena o número de segundos até o ano O JavaScript inclui diversas maneiras de exibir as informações e uma das mais simples é a instrução de document.write. A instrução de document.write exibe texto ou um número na tela. Já que seu programa de JavaScript será utilizado dentro de uma página da Web, a saída será exibida como parte da página. Para exibir o resultado, adicione a seguinte instrução: document.write ("Segundos até o ano 2001: "+ segundos); Note o sinal de (+) entre a mensagem de texto e a variável segundos. Nesse caso, ela diz ao navegador para combinar os dois valores em uma string de texto. E. Nemer 2 / 2 05/03/10 2
3 Adicionando o script a uma página da Web Você agora tem um script completo que calcula um resultado e o exibe. Sua listagem deve estar parecida com: <title> O ano 2001</title> <h1> Listagem Contagem de segundos até o ano 2001 </h1> <hr> <script language="javascript"> now = new Date(); y2k1 = new Date("Jan :00:00"); segundos = (y2k1 - now) / 1000; document.write ("Segundos até o ano 2001 : "+ segundos); Salve-o com a extensão.htm ou.html. Testando o script Para testar seu script, você simplesmente precisa carregar o documento de HTML que criou em um navegador da Web. Inicie o Netscape e selecione Open Page do menu File. Pressione o botão Choose File, então procure seu arquivo de HTML. Uma vez que o selecionou, pressione o botão Open para visualizar a página, que deverá ficar da seguinte forma: E. Nemer 3 / 3 05/03/10 3
4 Modificando o script Uma coisa que você provavelmente notou quando executou o script é que havia duas ou mais casas decimais listadas depois do número de segundos. Embora isso possa ser útil se você estiver interessado em precisão, não torna uma exibição muito atraente. O JavaScript inclui um recurso que arredondará os números para você. Tudo o que você precisa fazer é usar a função Math.round, que arredonda as casas decimais e oferece um número inteiro, como mostrado abaixo: segundos = Math.round(segundos); Exercício 1: Já tendo calculado quantos segundos faltam até o ano 2001, calcule também quantos minutos faltam até o ano 2001, apresentando uma mensagem similar àquela apresentada para os segundos ( obs: a divisão em JavaScript é feita da seguinte forma: a= b / c; ) Como os programas em JavaScript funcionam Utilizando funções O programa que você viu era uma simples lista de instruções. O navegador inicia com a primeira instrução depois da tag <SCRIPT> e segue cada instrução na ordem até alcançar a tag </SCRIPT> de fechamento (ou encontrar um erro). Embora esta seja uma abordagem simples e direta para scripts curtos, pode ser confuso ler um script enorme escrito dessa forma. Para tornar mais fácil para você organizar seu script, o JavaScript suporta funções. Definindo uma função Uma função é um grupo de instruções de JavaScript que pode ser tratada como uma entidade única. A fim de utilizar uma função, você deve primeiro defini-la. A listagem abaixo mostra um exemplo simples de uma definição de função: function Sauda( ) { alert("saudações."); A listagem acima define uma função que exibe uma mensagem de alerta para o usuário. Esta inicia com a palavra-chave function. O nome da função é Sauda. Note os parênteses depois do nome da função. Como você aprenderá a seguir, o espaço entre eles não está sempre vazio. As primeiras e últimas linhas da definição de função incluem chaves ( { e ). Você as utiliza para incluir todas as instruções na função. O navegador utiliza as chaves para determinar onde a função inicia e termina. Entre as chaves, essa função particular armazena uma única linha. Esta utiliza a função de alerta do JavaScript, que exibe uma mensagem de alerta. A mensagem conterá o texto Saudações. E. Nemer 4 / 4 05/03/10 4
5 Para tornar uma função mais flexível, você pode adicionar parâmetros, também conhecidos como argumentos. Estes são variáveis que são recebidas pela função toda vez que ela é chamada. Por exemplo, você pode adicionar um parâmetro chamado nome que diz para a função o nome da pessoa a saudar. A listagem abaixo mostra como ficaria a função com um argumento: function Sauda(nome) { alert("saudações,"+nome); Para utilizar esta função, você deveria incluí-la em um documento de HTML. Tradicionalmente, o melhor lugar para uma definição de função é dentro da seção <HEAD> do documento, Já que as instruções na seção <HEAD> são executadas primeiro, isso assegura que a função seja definida antes de ser utilizada. A listagem abaixo mostra a função Saúda embutida na seção de cabeçalho de um documento de HTML. <title>declaração de Funções</title> <script language = "JavaScript"> //Abaixo temos a definição da função Sauda. function Sauda(nome) { alert("saudações,"+nome); Este é o corpo da função. Chamando a função Você já definiu uma função e a colocou em um documento de HTML. Entretanto, se você carregar a listagem anterior em um navegador, notará que ela não faz absolutamente nada. A razão disso é que a função está definida ou seja, pronta para ser utilizada mas não foi utilizada ainda. Fazer uso de uma função é na realidade chamar a função. Para chamar uma função, utilize o nome da função como uma instrução em um script. Você precisará incluir os parênteses e os valores para os parâmetros da função. Por exemplo, eis uma instrução que chama a função Sauda: Saúda ( Edson );. E. Nemer 5 / 5 05/03/10 5
6 Isso diz ao interpretador de JavaScript para transferir a execução do programa para a primeira instrução na função Sauda. Também passa o parâmetro Edson para a função. Esse valor será atribuído à variável dentro da função (nome). Obs: As funções podem ter mais de um parâmetro. Para definir uma função com múltiplos parâmetros, liste um nome variável para cada parâmetro, separado por vírgulas. Para chamar a função, especifique os valores para cada parâmetro, separado por vírgulas. A listagem abaixo mostra um documento completo de HTML que inclui a definição de uma função e um segundo script no corpo da página que realmente chama a função. Para demonstrar a utilidade das funções, nós a chamaremos duas vezes para saudar duas pessoas diferentes. <title> Exemplo 1 - Declaração de Funções </title> <script language = "JavaScript"> //Esta é uma linha de comentário. //Abaixo temos a definição da função. function Sauda(nome) { alert("saudações,"+nome); <h1> Exemplo de chamada de função <h1> <script language = "JavaScript"> Sauda("Edson"); Sauda("Paulo"); Esta listagem inclui um segundo conjunto de tags <SCRIPT> no corpo da página. O segundo script inclui duas chamadas de função para a função Saúda, cada uma com um nome diferente. Agora que você tem um script que realmente faz algo, tente carrega-lo em um navegador. Você deverá ver algo como mostrado abaixo: E. Nemer 6 / 6 05/03/10 6
7 Note que a segunda mensagem de alerta não é exibida até que você pressione o botão de OK no primeiro alerta. Isso é porque o processamento de JavaScript é parado enquanto os alertas são exibidos. Retornando um valor Embora a função que você acabou de criar exiba uma mensagem para o usuário, as funções também podem retornar um valor para o script que as chamou. Isso permite que as funções sejam utilizadas para calcular valores. Como um exemplo, você pode criar uma função que calcula a média de quatro números Sua função deve iniciar com a palavra-chave function, o nome da função e os parâmetros que ela aceita. Utilizaremos os nomes de variável valor1, valor2, valor3 e valor4 para os quatro números cuja média queremos calcular. Eis a primeira linha da função: function Media(valor1, valor2, valor3, valor4) { A seguir, a função precisa calcular a média dos quatro números. Você pode calcular isso somando os números, depois dividindo pela quantidade de números (neste caso, 4). Assim sendo, a próxima linha da função ficaria da seguinte forma: media_calculada = (valor1+valor2+valor3+valor4)/4; Essa instrução cria uma variável chamada media_calculada e calcula o resultado adicionando os quatro números, depois dividindo por 4. (Os parênteses são necessários para dizer ao JavaScript executar a adição antes da divisão.) Para enviar esse resultado de volta ao script que chamou a função, você utiliza a palavrachave return. E a última parte da função fica da seguinte forma: return media_calculada; E. Nemer 7 / 7 05/03/10 7
8 A listagem abaixo mostra o script completo com chamada da função e passagem de parâmetros. <title> Exemplo 2 - Declaração de Funções com parâmetros </title> <script language = "JavaScript"> //Esta é uma linha de comentário. //Abaixo temos a definição de uma função com quatro parâmetros. function Media(valor1, valor2, valor3, valor4) { media_calculada = (valor1+valor2+valor3+valor4)/4; return media_calculada; <h1> Exemplo de chamada de função com retorno de valor </h1> <script language="javascript"> //A linha abaixo chama a função Media e retorna a média calculada para a variável resultado. resultado = Media(3,4,5,6); document.write ("<h3><i>resultado = "+ resultado+"</i></h3>"); <p> </p> Utilização da função prompt Essa função é semelhante a função alert, mas solicita ao usuário uma entrada. Utiliza-se esta função quando se deseja que o usuário entre com algum tipo de dado. Por exemplo, a listagem abaixo mostra uma script onde o usuário digita algo e o que ele digitou é apresentado no vídeo. <title> Exemplo de Utilização da Função Prompt </title> <h1> Exemplo de utilização da Função Prompt </h1> <script language="javascript"> coisa = prompt ("Digite algo e pressione a tecla <ENTER>"); document.write("você digitou "+ coisa); E. Nemer 8 / 8 05/03/10 8
9 A tela de saída pode ser algo da seguinte forma: Obs: Caso você esteja lendo um número, pode precisar usar a função parseint ( ) para converter uma string em um número inteiro ou a função parsefloat( ) para converter uma string em um número com ponto flutuante. Exemplo: numero = parseint(prompt ("Entre com um número )); Exercício 2: Utilizando o que você aprendeu da função prompt, modifique o script Exemplo 1 - Declaração de Funções, de forma que os nomes sejam digitados pelo usuário no teclado. Exercício 3: Utilizando o que você aprendeu da função prompt, modifique o script Exemplo 2 - Declaração de Funções com parâmetros, de forma que os números sejam digitados pelo usuário no teclado. Exercício 4: Modifique o script Exemplo 2 - Declaração de Funções com parâmetros, de forma que, além da função Media já existente, sejam criadas mais duas funções: uma que calcule a soma dos quatro números e outra que calcule o produto dos quatro números. Neste script, os quatro números também deverão ser digitados pelo usuário no teclado ( usar a função prompt ). E. Nemer 9 / 9 05/03/10 9
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
Utilizando Janelas e Frames Aprenderemos agora algumas técnicas mais específicas para fazer o JavaScript trabalhar com várias partes das páginas e navegadores da Web. Controlando janelas com objetos Já
Algoritmos em Javascript Sumário Algoritmos 1 O que é um programa? 1 Entrada e Saída de Dados 3 Programando 4 O que é necessário para programar 4 em JavaScript? Variáveis 5 Tipos de Variáveis 6 Arrays
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
JavaScript Introdução O JavaScript é utilizado por milhões de páginas na web para melhorar o design, validar forms, e muito mais O JavaScript foi inicialmente desenvolvido pela Netscape e é a linguagem
Página1 Javascript JavaScript (JS) é uma linguagem de programação client side Funciona no navegador do usuário. É uma linguagem baseada em objetos. "Walmir".length; 6 Para que serve - fazer websites responder
Objetos Sabe-se que variável são contêiners que podem armazenar um número, uma string de texto ou outro valor. O JavaScript também suporta objetos. Objetos são contêiners que podem armazenar dados e inclusive
Introdução ao HTML Utilizando frames Hospedando seu site na WEB Por quê???? Por que com tantos editores gráficos de HTML, devemos saber como escrever um código fonte? Porque se você só viu páginas feitas
1. Introdução JavaScript (ou JScript) Uma linguagem como o JavaScript permite criar interfaces interativas na web (permite a interação do usuário). Para desenvolver web sites interativos precisamos de
1 - Aulas 57, 58, 59 e 60 - Técnicas de programação. Funções Um programa pode possuir determinados processos realizados repetidas vezes ao longo da execução do programa. Estes processos podem se agrupar
Respondendo a eventos Até agora, a maioria dos scripts que você escreveu foi executado de uma forma tranqüila e ordenada, movendo-se da primeira instrução para a última. Agora aprenderemos a utilizar a
PHP Introdução Olá pessoal. Desculpe o atraso na publicação da aula. Pude perceber pelas respostas (poucas) ao fórum que a realização da atividade do módulo I foi relativamente tranquila. Assistam ao vídeo
Tutorial Módulo 1: Introdução e primeiros passos Por Daniel Chicayban (dan@trendnet.com.br) Introdução A HyperText Markup Language e a Web No núcleo de toda página da Web, encontramos a HyperText Markup
1 de 5 21-08-2011 22:15 Lição 1 - Criação de campos calculados em consultas Adição de Colunas com Valores Calculados: Vamos, inicialmente, relembrar, rapidamente alguns conceitos básicos sobre Consultas
PHP() é uma linguagem de integração de servidor que permite a criação de paginas dinâmicas. Como todas
O que é PHP? Acrônimo de PHP: Hipertext Language PostProcessor Inicialmente escrita para o desenvolvimento de aplicações Web Facilidade para iniciantes e recursos poderosos para programadores profissionais
LINGUAGEM C UMA INTRODUÇÃO AULA 2 Conceitos básicos 1 Identação Um ponto fundamental organização de escrita de códigos fonte é a identação. Identar é organizar horizontalmente de forma hierárquica as linhas
Incorporando JavaScript em HTML Existem quatro maneiras de incorporar JavaScript em HTML. Vamos abordar as três primeiras, por ser mais comum: Entre as tags dentro do código HTML. A partir
FCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos
FCT Faculdade de Ciências e Tecnologia Serviço Técnico de Informática STI SGCD Sistema Gerenciador de Conteúdos Dinâmicos Manual do Usuário Presidente Prudente, outubro de 2010 Índice 1. Introdução e Instruções
Aula 12: Funções. Pré-requisitos: Todas as aulas anteriores deste módulo. 1. Aproveitando Códigos no Programa
Aula 12: Funções Nesta aula explicaremos o que são e como usar funções nos seus programas em JavaScript. Você aprenderá como elas podem receber e retornar valores à estrutura que as acionou. Entenderá
O que é o Javascript? JavaScript é uma linguagem para criação de Home-Pages. Funções escritas em JavaScript podem ser embutidas dentro de seu documento HTML. Com JavaScript você tem muitas possibilidades
HTML / JAVASCRIPT. A versão atual é o HTML5 (seus predecessores imediatos são HTML 4.01, XHTML 1.1, etc.).
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
INTERNET NAVEGANDO A Web, como é chamada, é formada por milhões de lugares conhecidos como sites. Existem sites de universidades, empresas, órgãos do governo, sites pessoais etc. As informações estão organizadas
Tutorial Web Mail. Acesso e Utilização. MPX Brasil Cuiabá/MT: Av. Mal Deodoro, 1522 B Centro Norte. Contato: (65) 3364-3132 cuiaba@mpxbrasil.com.
Tutorial Web Mail Acesso e Utilização Como acessar meu e-mail institucional? 1. Para acessar seu e-mail institucional, acesse primeiramente o site ao qual ele pertence, por exemplo o e-mail contato@alianca.to.gov.br
APOSTILA DE FRONTPAGE 2000 Pagina 1 de 14 Introdução A cada dia verificamos que a informação é uma ferramenta de extrema necessidade em qualquer negócio. Sabendo disto, diversas empresas investem em tecnologias
Exercícios sobre Linguagem PHP: 1) Ao ser executado o código abaixo, em PHP, qual será o resultado impresso em tela? 2) Considere a linguagem de programação PHP e seus operadores. A execução da sentença:
Apostila de criação de website "Webnode" OBS: Informações e imagens retiradas do webnode O que é o WebNode : O WebNode é um sistema de criação de sites de fácil utilização. # Grátis. Sem burocracias, #
Laboratório 4 Validação do Formulário Introdução Agora que já definimos os nossos documentos usando xhtml e já os embelezámos através da utilização das CSS, está na hora de validar a informação que o utilizador
Web Design Aula 02: HTML Professora: Priscilla Suene priscilla.silverio@ifrn.edu.br Motivação Roteiro Introdução Conceitos HTML Primeira Página Identação Incluindo o título Salvando a página Vizualizando
1 Manual Atualização nº 1160 Novembro/2015 23/11/2015 NOVOS RECURSOS 2 01.01 Contrato de Colocação e Termo de Responsabilidade. 3 Se preferir, modifique os dados, alterando o tamanho da fonte e o texto.